Skip to main contentSkip to sidebarSkip to headerSkip to footer

Radio Group

A set of radio buttons where only one option can be selected.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
import { RadioGroup, RadioGroupItem } from "passport-ui";
import { Label } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div className="meta-container">
  <Label htmlFor="radio">Choose an option</Label>
  <RadioGroup defaultValue="option_2" id="radio">
    <div className="flex items-center gap-2">
      <RadioGroupItem value="option_1" id="option_1" />
      <Label htmlFor="option_1" className="text-muted-foreground">
        Option 1
      </Label>
    </div>
    <div className="flex items-center gap-2">
      <RadioGroupItem value="option_2" id="option_2" />
      <Label htmlFor="option_2" className="text-muted-foreground">
        Option 2
      </Label>
    </div>
    <div className="flex items-center gap-2">
      <RadioGroupItem value="option_3" id="option_3" />
      <Label htmlFor="option_3" className="text-muted-foreground">
        Option 3
      </Label>
    </div>
  </RadioGroup>
</div>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗