Form Fields
Single input components in Shoreline don't have labels or help messages by default, in order to build a field to be used on a form you must use the Field compound components set.
Labels and help text
In order to be accessible, fields in a form should have labels, and in use cases where we want to provide more information fields must have helper text. In Shoreline you can use Label
and FieldDescription
to add those elements to a field.
<Field>
<Label>Label</Label>
<InputElement />
<FieldDescription>Short description</FieldDescription>
</Field>
Indicating error
Some fields might have error states when a value is invalid. You can use FieldError
and the error
prop in Field
to indicate a form error.
Since Field
provides context to its children components FieldError
won't be rendered when the error prop is set to false.
<Field error>
<Label>Label</Label>
<InputElement />
<FieldError>Short description</FieldError>
</Field>