Components
Code examples
<RadioGroup> <Radio value="bus">Buss</Radio> <Radio value="train">Tog</Radio> <Radio value="plane">Fly</Radio> </RadioGroup>
Guidelines
Radio buttons should be used if you have between 2 and 5 options. If there are more than 5 options, you should instead use a NativeSelect, Select, or Autocomplete.
You may also consider using choice chips if they fit better with the design you are creating.
Remember to include RadioCardGroup as a wrapper around your buttons.
Usage
There are some guidelines on how to set up a group of radio buttons to make them easier to use for the users.
Orientation
As a general rule, radio buttons should be displayed vertically. However, there are some exceptions:
- If there are only two alternatives to choose from
- When the labels of the options are very short
Order
Keep the list sorted alphabetically by default. If certain options are more relevant or commonly used, place them at the top of the list before the remaining options.
Code
<Radio />
import { Radio } from "@vygruppen/spor-react";
A radio button
Props
Name | Type | Required? | Description |
|---|---|---|---|
value | string | The value returned when selected | |
children | React.ReactNode | The label of the radio button | |
disabled | boolean | ||
inputProps | React.InputHTMLAttributes<HTMLInputElement> | Targets the input |
<RadioGroup />
import { RadioGroup } from "@vygruppen/spor-react";
Groups several Radio components
Props
Name | Type | Required? | Description |
|---|---|---|---|
name | string | The name of the choice | |
onValueChange | (details: ValueChangeDetails) => void | Callback for when the choice changes | |
orientation | "horizontal" | "vertical" | Defaults to "horizontal" | |
defaultValue | string |