Choice pills
A named group of choice pills, nol-choice-pills, for choosing one of a few options: a radio group in which the chosen pill, or the first when none is, is the one Tab stop, and the arrow keys, Home and End move the choice and the focus together, wrapping at the ends. It does not keep its own choice: it reports each new one through ChoicePillsComponent.valueChange, and its owner binds it back to ChoicePillsComponent.value.
Examples
Loading…
States
Loading…
API
Selector nol-choice-pills
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
options | readonly SelectOption[] | Required | The options, one pill each in this order, showing its title; their values are distinct. |
value | string | Required | The value of the chosen option; no pill is chosen when no option has it. |
label | string | Required | The group's accessible name, such as the title of the setting it changes. |
describedBy | string | null | The id, or space-separated ids, of the elements that describe the group, such as a setting's description and its |
Outputs
| Name | Type | Description |
|---|---|---|
valueChange | string | Emits the value of the option the person chooses, by pointer or by keyboard, only when it differs from |
Accessibility
| Key | Action |
|---|---|
| Tab | Moves the focus to the checked pill, or the first when none is checked: the pills are one Tab stop. |
| Arrow Right | Picks the next pill and moves the focus to it, wrapping at the end; Arrow Down does the same. |
| Arrow Left | Picks the previous pill and moves the focus to it, wrapping at the start; Arrow Up does the same. |
| Home | Picks the first pill and moves the focus to it. |
| End | Picks the last pill and moves the focus to it. |
The pills sit in an element with the radiogroup role, named by label as aria-label and described by the element describedBy names, through aria-describedby.
Each pill is a button with the radio role that reports aria-checked; only the checked pill is in the Tab order.
The arrow keys, Home and End move the choice and the focus together, so the value changes as the focus moves.
Specification
Loading…