Select
10.2.17
Select components are used for collecting user provided information from a list of options.
| Namn | Typ | Beskrivning |
|---|---|---|
children | ReactNode | |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
fullWidth | boolean | |
hasExternalLabel | boolean | If true, the label will be rendered as a separate Typography element (with component="label")
above the select instead of inside it. The label is connected to the select via htmlFor.
When enabled, the Select and its external label are wrapped in a Box container to ensure
they stay together in flex/grid layouts (preventing the label and input from being split
into separate grid cells, for example).
The container respects the fullWidth prop and will expand accordingly. |
helperText | string | |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
isOpen | boolean | |
labelId * | string | |
labelText * | string | The label text. |
lang | "sv" |
"en" | Language used for internal translations. |
required | boolean | If true, aria-required="true" will be added to the input element, informing assistive technologies that the field is mandatory.
⚠️ Note: This does not enable native HTML validation or add a visual asterisk.
If a visual indication is needed, you must manually add a * to the label yourself. |
rounded | boolean | Determines whether the input should have rounded corners. |
startIcon | ReactElement |
npm install @sj-ab/component-library.ui.selectSelect använder internt vår Menu-komponent för att visa de olika valbara alternativen.
Select får sitt tillgängliga namn dels från komponentens label och dels från det alternativ som är valt just nu. Detta sker automatiskt internt i komponenten med aria-labelledby, så länge komponenten har fått ett unikt labelId-värde.
Alla utvecklare ansvarar för att skicka in ett unikt labelId-värde till varje Select, vilket krävs för att göra komponenten tillgänglig för skärmläsare.
Importer av Select
Repos med Select
Senaste installerade version av Select
Äldsta installerade version av Select