Text field
The kit's text field, input[nol-text-field], which styles a native input and leaves its value, events and validation to it. The input needs an accessible name, and aria-invalid="true" gives it the error border, a dashed CanvasText border twice as wide under forced colors; a FieldMessageComponent below it explains the error.
textarea[nol-text-field] is the same field on several lines, such as a teammate's role: the same border, corners, colors, text, focus, invalid and disabled looks, the field padding on every side, at least the field height, its rows setting how many lines it shows, and resized only up and down.
Examples
Loading…
States
Loading…
API
Selector input[nol-text-field], textarea[nol-text-field]
Import from @noldova/ui.components.angular
Accessibility
| Key | Action |
|---|---|
| Tab | Moves the focus into the field, or past it; a disabled field is skipped. In the field, the browser's own editing keys apply. |
The kit styles the native input or textarea, so it keeps the textbox role, its value, its disabled state and the browser's own editing keys.
Its owner names it, with a label element around it or aria-label; a placeholder is never its name.
Its owner marks an invalid entry aria-invalid, which draws the error border, and names the field's message in aria-describedby.
Specification
Loading…