Design System/Blocks/Sign In

Sign In

Authentication form layouts — card, compact stacked, and split-screen.

Block

Field · Input · Button · Checkbox · Separator

When To Use

  • Use Sign In when you need a composed screen-level pattern and want the structural decisions made before you tune the visuals.
  • Start from the example whose layout and information hierarchy already match the workflow you are building.
  • Review the examples below to compare density, framing, and emphasis before copying one into production code.

When Not To Use

  • Do not use Sign In when the page structure is still exploratory; start with smaller primitives if the workflow is not stable yet.
  • Do not copy a full-screen pattern unchanged when only one fragment of the layout is relevant to the task.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Included examples

Card layout, Stacked inputs, hidden labels, Form left, brand panel right

Variation points

Compare layout, content density, and emphasis across the included examples before copying an implementation.

Example Code

import { Field } from "@hilum/ui";
import { Input } from "@hilum/ui";
import { Button } from "@hilum/ui";
import { Checkbox } from "@hilum/ui";
import { Separator } from "@hilum/ui";
import { Label } from "@hilum/ui";

export default function SignInCard() {
  return (
    <div className="mx-auto w-full max-w-sm">
      <div className="mb-8 text-center">
        <div className="mx-auto mb-4 flex size-10 items-center justify-center rounded-xl bg-brand-primary">
          <span className="body font-bold text-white">D</span>
        </div>
        <h1 className="heading text-ground-900">Sign in to your account</h1>
        <p className="mt-1 body text-ground-400">
          Or{" "}
          <a href="#" className="font-medium text-ground-900 underline underline-offset-2">
// ...trimmed for docs

Sign In · Card

Card layout

Centered card with social login

D

Sign in to your account

Or start your free trial

Forgot password?
Or continue with

Don't have an account? Sign up

Sign In · Compact / no labels

Stacked inputs, hidden labels

Email + password with shared border, no visible labels

D

Sign in

New here? Create an account

Forgot password?
Or

Sign In · Split screen

Form left, brand panel right

Two-column layout — works full-page

D

Sign in to your account

Or start your free trial

Forgot password?