Hoppa till huvudinnehåll

Radio

Radioknappar
Version: 1.0.3
Versionslogg
Storybook
Referens

Radioknappar är en typ av inmatningsfält som används för att välja ett (1) alternativ från en uppsättning av flera alternativ. Om det är fler alternativ än fem bör Select användas istället.

Installation och användning​

npm install @midas-ds/radio
import { Radio, RadioGroup } from '@midas-ds/radio'

Disabled​

Sätt isDisabled antingen på RadioGroup eller på enskilda val av Radio

Validering​

Sätt validering med isInvalid eller använd inbyggda tester som isRequired.

Beroenden

  • @midas-ds/theme@^0.5.23
  • react@^18.2.0

Riktlinjer​

Val av komponent​

  • En av radioknapparna ska alltid vara ifylld. Om du misstänker att användaren vill kunna avstå från att välja något, skapa ett sista alternativ som du kallar "Inget av ovanstående" eller liknande.
  • Givet ovanstående riktlinje kan radioknappar inte användas ensamma, utan måste alltid vara två eller flera.
  • Radioknapparna placeras som regel vertikalt för att underlätta avläsning. Om antalet alternativ för en given fråga är begränsat till två (2) och det är ont om vertikalt utrymme så kan en horisontell orientering användas.
  • Fältetiketten ska inledas med stor bokstav och inte följas av punkt.

API​

NamnTypStandardBeskrivning
inputRef RefObject<HTMLInputElement>-A ref for the HTML input element.
value *string-The value of the radio button, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).
isDisabled boolean-Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance.
autoFocus boolean-Whether the element should receive focus on render.
id string-The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
children ReactNode | ((values: RadioRenderProps & { defaultChildren: ReactNode; }) => ReactNode)-The children of the component. A function may be provided to alter the children based on component state.
className string | ((values: RadioRenderProps & { defaultClassName: string; }) => string)-The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
style CSSProperties | ((values: RadioRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)-The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
slot string-A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.

Beroenden

  • @midas-ds/theme@^0.5.23
  • react@^18.2.0