• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Inställningar

Komponenter

Komponenter

​
​

Inga resultat hittade, prova med andra sökvillkor.

Stepper

Stepper

5.0.40

Steppers allow users to increase or decrease the number in a single button press.

Demo
Props
Installation
Länkar
Best practices
Tillgänglighet
Change log
Statistik

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

ariaLabel *

stringThe 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

booleanIf true, the component is disabled.

increaseButtonProps

Partial<IconButtonProps>Custom props for the increase button

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

lang

"sv" | "en"Language used for internal translations.

max

numberThe maximum value of the stepper.

min

numberThe minimum value of the stepper.

onChange

(value: number) => voidA callback function triggered when value is changed

ref

React.Ref<HTMLDivElement>Ref to be forwarded to the root element

value

numberThe current numeric value of the stepper.

editable

true | falseIf the stepper should have an editable text field

id

string | neverId is mandatory when stepper is editable

onBlur

() => void | neverA callback function triggered when text input is blurred

textFieldLabelSuffix

string | neverText field label suffix for screen readers

textFieldProps

TextFieldProps | neverProps for the text field

textFieldSx

SxProps<Theme> | neverStyles for the text field

Installation

Kodexempel
npm install @sj-ab/component-library.ui.stepper

Länkar

  • Storybook

  • Figma

  • Bit.cloud

Best practices

Tillgänglighet

Semantik

Stepper ä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 .

Kodexempel
<!-- 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>

WAI-ARIA

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.

Change log

  • Fix screen reader announcements in Stepper

    5.0.37
  • Security updates and bit automatic vulnerabilites workflow fix

    5.0.27
  • Migrate to ESLint 9

    5.0.13

Statistik

  • Importer av Stepper

    3
  • Repos med Stepper

    9%
  • Senaste installerade version av Stepper

    4.1.5
  • Äldsta installerade version av Stepper

    3.0.13