Input
The Input component is a text input field that allows users to enter text and can be used to collect user feedback or enter information in data entry forms.
placeholder
sizes
states
types
custom
Code
<input class="backoffice-input" type="text" name="{@name}" value="{@value}" />
| Class name | type | |
|---|---|---|
backoffice-input, backoffice-textarea | component | Container element |
| backoffice-input:has(input) | component | Sets display parameters to the elements that contain an input element |
| backoffice-input input | component | Sets display parameters to the input element |
| backoffice-input-sm | modifier | Adds sm size |
backoffice-input:disabled, backoffice-textarea:disabled, backoffice-input-disabled | modifier | Sets the display of the disabled status |
backoffice-input:focus, backoffice-input:focus-visible, backoffice-textarea:focus, backoffice-input-focus | modifier | Sets the display of the focus status |
backoffice-input input:focus, backoffice-input input:focus-visible | modifier | Sets the display of the focus status of the input element |
backoffice-input.backoffice-input-sm:focus, backoffice-input-focus.backoffice-input-sm | modifier | Sets the display in the focus state for elements of the sm size |
backoffice-input-error, backoffice-textarea-error | modifier | Sets the display of the error status |
| backoffice-input-error.backoffice-input-sm | modifier | Sets the display in the error state for elements of the sm size |
| backoffice-input[type='date'] | modifier | Sets the display for an input of type date |
backoffice-input[type='date']::-webkit-calendar-picker-indicator | modifier | Sets the display properties of inner elements for input of type date |
backoffice-input[type='date']::-webkit-inner-spin-button | modifier | Sets the display properties of inner elements for input of type date |
backoffice-input::placeholder, backoffice-textarea::placeholder, backoffice-input input::placeholder | modifier | Sets the placeholder properties |