# Forms (/patterns/forms)



Ask for the information needed to complete the current task. Put related fields together, use a visible label for each control, and state what submission will do. Start with one clear primary action.

<PatternIllustration pattern="forms" />

## Choose a control [#choose-a-control]

| Input                        | Shared component                                                 | Guidance                                                 |
| ---------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------- |
| A short text value           | [TextInput](/components/text-input)                              | Keep examples in helper text, not only in a placeholder. |
| Several lines of text        | [TextArea](/components/text-area)                                | Make the expected length clear.                          |
| A quantity                   | [NumberInput](/components/number-input)                          | Show units and relevant limits.                          |
| One choice from a list       | [Select](/components/select) or [Combobox](/components/combobox) | Add search when the list is hard to scan.                |
| Several independent choices  | [CheckboxGroup](/components/checkbox-group)                      | Make the group question visible.                         |
| One of a few visible choices | [RadioGroup](/components/radio-group)                            | Keep the alternatives easy to compare.                   |

Use [Form](/components/form) for the shared field structure. Identify required fields consistently, and explain constraints before an error occurs. Select defaults only when they are a safe and useful choice for the task.

## Validation [#validation]

Validate a field when the person has had a reasonable chance to complete it, or on submission. Avoid showing an error while someone is still entering a valid value. Keep server-side validation authoritative and display returned field errors next to the relevant control.

Connect descriptions and errors programmatically to their fields. On failed submission, help the person reach the first problem. Preserve their other answers. See [Error handling](/patterns/error-handling).

## Submit and recover [#submit-and-recover]

Name the result in the action label: “Create entity,” “Send invitation,” or “Save changes.” Show a pending state, prevent accidental duplicate requests, and confirm success only when the application has accepted the change.

Keep optional advanced settings behind [progressive disclosure](/patterns/progressive-disclosure) when they are rarely needed. If leaving the page would discard edits, give the person a chance to keep them.

Check the form with keyboard navigation, autofill, long values, validation failures, and slow requests. Every path should retain the input until it is saved or the person chooses to discard it.