Stepper
5.0.40
Steppers allow users to increase or decrease the number in a single button press.
| Namn | Typ | Beskrivning |
|---|---|---|
ariaLabel * | string | The label for the stepper. Mandatory for accessibility |
customAttribute | { attribute: string; value: string | number; } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslations | DeepPartial<StepperTranslation> | Override default translations with custom text. |
decreaseButtonProps | Partial<IconButtonProps> | Custom props for the decrease button |
disabled | boolean | If true, the component is disabled. |
increaseButtonProps | Partial<IconButtonProps> | Custom props for the increase button |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
lang | "sv" | "en" | Language used for internal translations. |
max | number | The maximum value of the stepper. |
min | number | The minimum value of the stepper. |
onChange | (value: number) => void | A callback function triggered when value is changed |
ref | React.Ref<HTMLDivElement> | Ref to be forwarded to the root element |
value | number | The current numeric value of the stepper. |
editable | true | false | If the stepper should have an editable text field |
id | string | never | Id is mandatory when stepper is editable |
onBlur | () => void | never | A callback function triggered when text input is blurred |
textFieldLabelSuffix | string | never | Text field label suffix for screen readers |
textFieldProps | TextFieldProps | never | Props for the text field |
textFieldSx | SxProps<Theme> | never | Styles for the text field |
npm install @sj-ab/component-library.ui.stepperStepper är tänkt att vara ett SJ-designat alternativ till en vanlig <input type="number">.
Komponenten presenteras antingen enbart som en text med aktuellt värde och två knappar för att öka eller minska, eller som en kombination av knapparna och ett redigerbart sifferinmatningsfält .
<!-- Default -->
<p>
Current value: 0
</p>
<button tabindex="-1" type="button" aria-label="Decrease value No label stepper" role="button" aria-disabled="true"></button>
<button tabindex="0" type="button" aria-label="Increase value No label stepper" role="button"></button>
<!-- Editable -->
<input aria-invalid="false" aria-describedby="example2-helper" id="example2" type="number" aria-label="Editable stepper (min: 0 max: 9)" min="0" max="9" value="0">
<button tabindex="-1" type="button" aria-label="Decrease value Editable stepper" role="button" aria-disabled="true"></button>
<button tabindex="0" type="button" aria-label="Increase value Editable stepper" role="button"></button>
Komponenten använder aria-live för att automatiskt läsa upp det nya värdet för skärmläsaranvändare när värdet ändras.
Det finns också dolda, extra instruktioner för att tydliggöra komponentens funktion:
"Skriv in ett nummer eller använd upp- och nedpilarna för att ändra antalet"
Instruktionerna kopplas ihop med inmatningsfältet med aria-describedby och läses upp när fältet får fokus.
Importer av Stepper
Repos med Stepper
Senaste installerade version av Stepper
Äldsta installerade version av Stepper