Text field box

A one-line text field with an IconButtonComponent inside it, at its end, such as a folder field's Choose folder button: nol-text-field-box holds an input[nol-text-field] and then the icon button, as its direct children. The box takes the field's width, and the input fills it with its own border, colors, focus, invalid and disabled looks; the button sits inside the input's border at its end, centered on its line, its hover fill as far from the field's end as from its top, and the input's text stops the field padding before the button's target. The button comes after the input by keyboard, and while it has keyboard focus the field shows its focus border, or its focus outline under forced colors. The owner names the button and disables it along with the input. In place of the button, the box can hold muted text at its end, a TextFieldEndDirective. With its icon, the box also shows a decorative glyph inside the input's border at its start.

Examples

Loading…

States

Loading…

API

Selector nol-text-field-box

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`icon`	`string \| null`	`null`	The Material Symbols name of a glyph the field shows inside its border at its start, such as `search` for a search field; null when not bound, or empty, which shows none. The glyph is 1rem, centred on the field's line and the field padding from its border, in the theme's muted text color; the input's text starts the theme's `space-2` step after it, and the field keeps its height, border, focus look and width. Without a button or end text, the text runs to the field padding at the field's end; with end text, the typed text still keeps its 4rem. The glyph is decorative: it is hidden from assistive technology, so the input keeps the name its owner gives it, and it takes no pointer, so a click on it reaches the input. It dims with a disabled input, and is `GrayText` under forced colors then. In a right-to-left layout it is at the right.

Accessibility

Key	Action
`Tab`	Moves the focus into the input, then to the button inside the field, which comes after it; the muted text at the end takes no focus.

The box adds no role of its own: the input keeps its textbox role and the name its owner gives it, and a button inside keeps its button role and its own name.

While the button inside has keyboard focus, the field shows its focus border.

The muted text at the end, marked nolTextFieldEnd, takes an id that the input names in aria-describedby, so it is read as the field's description; a click on it reaches the input.

A glyph at the start, named by icon, is decorative: it is hidden from assistive technology with aria-hidden and takes no pointer, so the input keeps the name its owner gives it.

Specification

Loading…