Intro
Brukes til å gi aktivt samtykke enten i begynnelsen eller slutten av en flyt.
Egnet til:
- La brukeren gi aktivt samtykke
Eksempler
Tilgjengelighet
Tastaturinteraksjon
| Kommando | Interaksjon |
|---|---|
| Tab | Flytter fokus til den valgte checkboxen |
| Shift+Tab | Flytter fokus til element før checkboxen i tabindex |
| Space | Hake av/fjerne avhakning |
Props
ConfirmationPanel
- children? ReactNode
- Additional information on panel
- label ReactNode
- Checkbox label
- error? ReactNode
- Error message for element
- errorId? string
- Override internal errorId
- className? string
- size? "medium" | "small"
- Changes font-size, padding and gaps
- value? any
- The value of the HTML element.
- disabled? boolean
- Disables element @note Avoid using if possible for accessibility purposes
- id? string
- Override internal id
- description? string
- Adds a description to extend labling of Checkbox
- ref? Ref<HTMLInputElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- ConfirmationPanel extends HTMLInputElement
Tokens
| Token | Fallback |
|---|---|
| --ac-confirmation-panel-border | --a-border-warning |
| --ac-confirmation-panel-bg | --a-surface-warning-subtle |
| --ac-confirmation-panel-checked-border | --a-border-success |
| --ac-confirmation-panel-checked-bg | --a-surface-success-subtle |
| --ac-confirmation-panel-error-border | --a-border-danger |
| --ac-confirmation-panel-error-bg | --a-surface-danger-subtle |