Radio
Inmatningsfält som används för att välja exakt ett alternativ.
<RadioGroup
label='Välj din favoritfrukt'
description='Du kan bara välja en'
defaultValue='apple'
>
<Radio value='apple'>Äpple</Radio>
<Radio value='banan'>Banan</Radio>
</RadioGroup>
Installation
- npm
- Yarn
- pnpm
npm install @midas-ds/components
yarn add @midas-ds/components
pnpm add @midas-ds/components
import { Radio, RadioGroup } from '@midas-ds/components'
Kontrollerat val
Använd attributet value
och eventet onChange
för att använda controlled value på RadioGroup.
Den valda radioknappens värde skickas till callbacken, så kan du använda det för att uppdatera ditt state.
import React from 'react'
const [selectedFruit, setSelectedFruit] = useState('banan')
return (
<RadioGroup
label='Välj din favoritfrukt'
description='Du kan bara välja en'
value={selectedFruit}
onChange={setSelectedFruit}
>
<Radio value='apple'>Äpple</Radio>
<Radio value='banan'>Banan</Radio>
</RadioGroup>
)
Riktlinjer
- 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.
- 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.
- Om alternativen inte utesluter varandra, använd Checkbox.
- Om det är fler alternativ än fem bör Select användas istället.
API
Radio
Name | Type | Default | Description |
---|---|---|---|
inputRef | RefObject<HTMLInputElement> | - | A ref for the HTML input element. |
isDisabled | boolean | - | Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance. |
id | string | - | The element's unique identifier. See MDN. |
autoFocus | boolean | - | Whether the element should receive focus on render. |
value * | string | - | The value of the radio button, used when submitting an HTML form. See MDN. |
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 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 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 |
RadioGroup
Name | Type | Default | Description |
---|---|---|---|
label | string | - | Label for the RadioGroup |
description | string | - | Additional description rendered below the label |
errorMessage | string | ((validation: ValidationResult) => string) | - | String to display as error message or function to handle the result and produce the error message |
errorPosition | "top" | "bottom" | top | |
isDisabled | boolean | - | Whether the input is disabled. |
className | string | ((values: RadioGroupRenderProps & { defaultClassName: string; }) => string) | - | The CSS className for the element. A function may be provided to compute the class based on component state. |
style | CSSProperties | ((values: RadioGroupRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | - | The inline style for the element. A function may be provided to compute the style based on component state. |
id | string | - | The element's unique identifier. See MDN. |
slot | string | - | A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit |
defaultValue | string | - | The default value (uncontrolled). |
name | string | - | The name of the input element, used when submitting an HTML form. See MDN. |
value | string | - | The current value (controlled). |
isReadOnly | boolean | - | Whether the input can be selected but not changed by the user. |
isInvalid | boolean | - | Whether the input value is invalid. |
validationBehavior | "native" | "aria" | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
isRequired | boolean | - | Whether user input is required on the input before form submission. |
validate | (value: string) => true | ValidationError | - | A function that returns an error message if a given value is invalid.
Validation errors are displayed to the user when the form is submitted
if |
orientation | Orientation | 'vertical' | The axis the Radio Button(s) should align with. |