Inputs
Inputs, selects, checkboxes, switches and setting rows, with their native controls kept in light DOM.
These render their native control in light DOM, so password managers, <label for> and forms work as they do on any page.
Input
| Attribute | Values |
|---|---|
label |
The visible label, linked to the input |
type, name, value, placeholder, autocomplete |
Passed to the <input> |
hint |
Help text under it, linked with aria-describedby |
error |
An error under it; marks the input invalid |
required, disabled |
Passed to the <input> |
Select
Write <option> children, or set options to [{ "value", "label" }]. It fires the native change.
Checkbox and switch
gw-switch is the same native checkbox drawn as a switch, with role="switch" so it’s announced as one. Both take label, name, value, checked, disabled and hint. label-hidden keeps the label for assistive technology but hides it, for a control whose name is already beside it, as in a setting row.
Setting row
A setting’s name and description on one side and its control on the other. A wide control drops under the text when there isn’t room, and rows after the first get a line above them.