# Sign-in

Sign in and sign up on one plate: Google and GitHub keys with their marks stamped in monochrome, an email route underneath, a two-way selector that re-prints the plate, and errors that say how to fix them.

Kit part · With the Kit · https://tactileui.dev/parts/sign-in

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Kit parts and one delegated module. The plate is a panel. Checking and hints run from listeners on the document, so a form added after load needs no call.

## Variants

- Providers only · the Tactile UI account
- Error on the email
- Busy · waiting on the server

## States

- Rest
- Pressed
- Focus
- Error · busy

## Props and options

| Name | Kind | Description |
| - | - | - |
| [data-in] · [data-up] | attribute | Shown only when signing in, or only when making an account: titles, fields, the go key’s words, the foot. |
| data-missing · data-invalid | attribute | Your own words for an empty or a wrong field. |
| data-min-up | attribute | A minimum password length, applied only when making an account. |
| data-done | attribute | Printed in the status line when nothing else handles the form: for static pages and demos. |
| aria-busy | attribute | On the form while it waits; the go key shows its amber lamp. |

## Usage notes

Switch to New account and the plate asks for a name. Send it empty to see the errors, then fill it in.

## Accessibility

- The mode is a real radio group; switching it disables the hidden fields, so neither the keyboard nor the form ever reaches them.
- Nothing typed is cleared.
- The status line is a polite live region with words beside its lamp.

## Related parts

- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Selector](https://tactileui.dev/parts/selector): One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.
- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.