Either use a
<label> or the
label attribute to provide a label for a form input. The
<sbb-form-field> will automatically assign the correct id reference between label and input.
When using the floating label and setting the value programmatically to empty or from empty to a specific value,
it's mandatory to call the
reset() method of the
sbb-form-field to update the state of the floating label.
Error messages can be shown under the form field by adding
sbb-form-error elements inside the
In order to avoid the layout from "jumping" when an error is shown, the option of setting
error-space="reserve" on the
<sbb-form-field> will reserve space for a single line of an error
It is possible to add content as a prefix or suffix in a
<sbb-form-field>. This can be done via
<sbb-icon slot="prefix" name="pie-small" />
<sbb-icon slot="suffix" name="circle-information-small" />
By default, the component has a defined width and min-width. However, this behavior can be overridden by setting
width property to
collapse: in this way the component adapts its width to the inner slotted input component.
This is useful, for example, for the
sbb-time-input component. However, as the width-styles are exposed to the host,
it's possible to apply any desired width by setting just the
min-width CSS properties.
<sbb-form-field> does not apply any additional accessibility treatment to a form
element. However, several of the form field's optional features interact with the form element
contained within the form field.
When you provide a label via
<label> or the
associates this label with the field's form element via a native
<label> element, using the
attribute to reference the control's ID.
When using a non-native form element (e.g.
aria-labelledby is used, to connect the
form element with the label, by setting an id on the label and referencing this id in the
aria-labelledby attribute placed on the form element.
Please note that only one
<label> element is supported. Additionally, if you place the
element outside the
<sbb-form-field>, the automatic assignment is skipped, and it is up to the
consumer to use the correct id references.
When you provide informational text via
<sbb-form-error> automatically adds
these elements' IDs to the form element's aria-describedby attribute. Additionally,
<sbb-form-error> is slotted to an element having
aria-live="polite" so that assistive
technology will announce errors when they appear.
| || ||Whether to display the form field without a border.|| || |
| || ||Whether to reserve space for an error message. || || |
| || ||Whether the label should float. If activated, the placeholder of the input is hidden.|| || |
| || ||Label text for the input which is internally rendered as || || |
| || ||Indicates whether the input is optional.|| || |
| || ||Size variant, either l or m.|| || |
| || ||Defines the width of the component: - || || |
clear() => Promise<void>
Manually clears the input value. It only works for inputs, selects are not supported.
getInputElement() => Promise<HTMLInputElement | HTMLSelectElement | HTMLElement>
Returns the input element.
Promise<HTMLElement | HTMLInputElement | HTMLSelectElement>
reset() => Promise<void>
Manually reset the form field. Currently, this only resets the floating label.
| ||Slot to render an error.|
| ||Slot to render a label.|
| ||Slot to render an icon on the left side of the input.|
| ||Slot to render an icon on the right side of the input.|
| ||Slot to render an input/select.|
sbb-form-field --> sbb-icon
style sbb-form-field fill:#f9f,stroke:#333,stroke-width:4px