Radio

Radioknappar

Storybook

React Aria

Inmatningsfält som används för att välja exakt ett alternativ.

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Radio, RadioGroup } from '@midas-ds/components'

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

Namn	Typ	Standard	Beskrivning
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).
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.

RadioGroup

Namn	Typ	Standard	Beskrivning
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
isDisabled	boolean	-	Whether the input is disabled.
className	string | ((values: RadioGroupRenderProps & { 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: RadioGroupRenderProps & { 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.
id	string	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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.
name	string	-	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
value	string	-	The current value (controlled).
defaultValue	string	-	The default value (uncontrolled).
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.
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isRequired	boolean	-	Whether user input is required on the input before form submission.
isInvalid	boolean	-	Whether the input value is invalid.
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 `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
orientation	Orientation	'vertical'	The axis the Radio Button(s) should align with.