Skip to content
Vy logo
  • Spor
  • Resources
Components

Radio

Radio buttons let users pick one of a few alternatives

FigmaGitHub

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 or InfoSelect.

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.

Code

<Radio />

import { Radio } from "@vygruppen/spor-react";

A radio button

Props

Name
Type
Required?
Description
valuestringThe value returned when selected
childrenReact.ReactNodeThe label of the radio button
disabledboolean
inputPropsReact.InputHTMLAttributes<HTMLInputElement>Targets the input

<RadioGroup />

import { RadioGroup } from "@vygruppen/spor-react";

Groups several Radio components

Props

Name
Type
Required?
Description
namestringThe name of the choice
onValueChange(details: ValueChangeDetails) => voidCallback for when the choice changes
orientation"horizontal" | "vertical"Defaults to "horizontal"
defaultValuestring