# Form > Labels, controls, checks, errors, the form alert and the password field for every form a member fills in. - Block class: `.hs-form` - CSS: `components/form.css` (also inside https://brand.honorsociety.org/brand.css) - JS: `components/password.js`. Load it only on a page that has this component. - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-2b.html - Variants: Field with a hint, Input, select, textarea, error, disabled, Checkbox, radio and fieldset, Form alert, Password field, Password field, sign-in - HTML page: https://brand.honorsociety.org/components/form/ ## What it is Label 16px/600 ink. Control 40px, 16px ink, 1px slate-500 border (3.7:1), 4px radius. Focus is the shared gold outline and navy ring, and the border turns navy. Field order: label, control, hint, error. Mark the optional fields, not the required ones. ## When to use - Any form a visitor or member fills in: login, registration, `/member/induction`, the profile edit dialogs. - A form that failed on submit: put the form alert at the top of the form. - A new password: the password field with `password.js`. - A password on a sign-in or account page: the same password field and eye toggle, without the meter and the rules. - Date parts or a city and ZIP pair on one line: `.hs-fieldset__row` inside a fieldset. ## When not to use - To show a coupon or promotion code a member copies, use the [Code box](/components/code-box/). - To filter one list by category, use [Filter chips and tags](/components/chips/). - To confirm an action that worked, use a [Callout](/components/callout/) with `role="status"`. The form alert is for errors only. - To open a short form over the page, put the form inside a [Dialog](/components/dialog/). - For the routes and the help line around a form (“Forgot your password?”, “Need help signing in?”), use [Form link, divider and support note](/components/form-note/). ## Rules - Keep this order inside `.hs-field`: `.hs-label`, `.hs-control`, `.hs-hint`, `.hs-field-error`. In a `.hs-fieldset` the hint follows `.hs-fieldset__options`. - Never use a placeholder as the label. Every control keeps a visible ``. A placeholder may only show an example value: `placeholder="3.75"`. - Mark the optional fields with `(optional)` inside the label. Leave the required fields unmarked. - Keep a hint to one short line. An autofill list or the phone keyboard can cover a long hint. - Write each error as the fix: “Enter your GPA as a number from 0 to 5, for example 3.75.” Set `aria-invalid="true"` on the control and put the `.hs-field-error` under it. - After a failed submit, add the form alert (`.hs-callout.hs-callout--danger.hs-form-alert`) at the top, with one link per error to the field `id`. - Password field: `.hs-field.hs-password` holds `.hs-password__input`, the toggle (shipped `hidden`), `.hs-meter` and `.hs-password__rules`. Each rule is `

`; the rules are the site’s `HsUser\PasswordRules`. Load `password.js`. - Give every toggle `aria-controls` with the input `id`. The script reads it first. - Toggle: one pattern on every password field, the eye / eye-off icon button inside the field. Put both SVGs in the button, `.hs-password__icon--show` then `.hs-password__icon--hide`; CSS shows one by `aria-pressed`. Never write a text toggle (“Show” / “Hide”). - Leave the meter and the rules off a password the member types to prove who they are (`autocomplete="current-password"`). They belong to a new password only (`autocomplete="new-password"`). ## Accessibility - Give every control a ``, and every group a `fieldset` with a `legend.hs-label`. Link the hint and the error to the control with `aria-describedby`. - Contrast on white: label ink 13.0:1, hint slate 6.2:1, placeholder slate 6.2:1, error danger 5.4:1. The control border is slate 500 at 3.7:1 (WCAG 1.4.11 asks 3:1). Disabled text is exempt. - Focus is the shared gold outline and navy ring, and the border turns navy. Control text stays 16px, so iOS does not zoom on focus. - Checkboxes and radios are native, in navy through `accent-color`: the browser keeps the checked, indeterminate and forced-colours states. The 40px row and the whole label are the tap target. - The form alert takes `role="alert"` and `tabindex="-1"`. Move focus to it after submit. - Password: the toggle is a button with `aria-pressed` and `aria-controls`; its `aria-label` flips between “Show password” and “Hide password”. Its hit area is 44px square, and it takes the shared focus style. The icon is slate 6.2:1, navy on hover; both SVGs are `aria-hidden`. Without `password.js` the toggle stays hidden, the field stays a plain password input, and the rules stay visible. The meter length repeats its colour, and a hidden `aria-live` label says “Strength: Fair”. Transitions stop under `prefers-reduced-motion: reduce`. ## Variants ### Field with a hint The hint is 14px slate, under the control. Link it with `aria-describedby`. ```html

Phone

Include the country code, for example +1 for the United States.

``` ### Input, select, textarea, error, disabled `aria-invalid="true"` gives a 2px danger edge; `.hs-field-error` under the control says what to fix. `--short` 10rem, `--medium` 20rem. ```html ``` ### Checkbox, radio and fieldset Native 20px box in navy. The row is 40px tall and the label is the tap target. In a fieldset the hint follows the options. ```html

Educational or professional status

Undergraduate student

Graduate student

Working professional

Check all that apply.

Preferred contact

Phone

``` ### Form alert A danger callout at the top of a form that failed, with one link per error. It takes `role="alert"` and focus after submit. ```html

Fix 2 fields to save your academic record

Enter your GPA as a number from 0 to 5, for example 3.75.
Enter your school.

``` ### Password field Type in it. The strength meter is one brand bar: a third danger, two thirds warning, full success; a hidden live label says the word. The rules tick when met. Needs `password.js`. ```html

Password

8+ characters
1 letter
1 number

``` ### Password field, sign-in A password the member already has: the eye toggle, no meter, no rules. Without `password.js` the toggle stays hidden and the field works as a plain password input. Decided in [round 4](/decisions/components-round-4.html): one toggle pattern on every password field. ```html

Password

```