Form field

A wrapper component for form controls

UsageCodeAccessibility
<sl-form-field hint="Please enter a descriptive name for the course." label="Course name">
  <sl-text-field name="courseName"></sl-text-field>
</sl-form-field>

When to use

If a field is part of a larger form, you should wrap it in a form field component. This will ensure that the field is properly labeled and that the hint is announced to screen readers.

When not to use

Do not use the form field if the field is not part of a larger form. For example, if you are using a text field as a search input, you should not wrap it in a form field.

Layout

A form field always has a vertical layout. The label is always at the top, followed by an optional hint and then the form control itself, and at the bottom the error message, depending on the state of the component.

Anatomy

A form field should always have a label. That label can be hidden from view, but it should always be present in the DOM. The label is used to associate the form field with the form control. The label is also used to announce the form field to screen readers. The hint is optional. It is used to provide additional information about the form field. The hint is announced to screen readers after the label.

ItemNameDescriptionOptional
1Form fieldWrapper component for form controls.no
2LabelDescriptive text that helps identify and describe the purpose of the form control.no
3HintProvides additional information or context.yes
4Form controlSpace to insert the preferred form control.no
4Validation messageDescribes what went wrong after validation.yes

Options

With these options you can tweak the appearance of the label and hint in Figma. They are available in the Design Panel so you can compose the input field to exactly fit the user experience need for the uses case you are working on.

Label

ItemOptionsDescription
Sizesm md lgThe label is available in three sizes. If not specified the default value is medium.
TextvalueDisplays the text of the label.
DisabledbooleanIndicates if the label has disabled styling.
RequiredbooleanIndicates if the form control is required.
OptionalbooleanIndicates if the form control is optional.
InfobooleanShows an info icon on the end of the label to provide additional information.

Hint

ItemOptionsDescription
Sizesm md lgThe hint is available in three sizes. If not specified the default value is medium.
TextvalueDisplays the text of the hint.
Statedefault invalid disabledIndicates the state of the form control.
IconbooleanShow an icon in front of the hint.
Interactive example