Mokri

Preview

Option 1Option 2Option 3

Installation

<> import.ts

import { Radio } from "@/components/ui/radio"

Code

<> component.tsx

import { Radio } from "@/components/ui/radio"

<Radio
  name="group"
  value="option1"
  label="Option 1"
  checked={value === "option1"}
  onChange={setValue}
/>

API Reference

Radio

A control that allows the user to select a single option from a set.

<> import.ts

import { Radio } from "@/components/ui/radio"

Props

Prop	Type	Default	Description
`name`	`string`	—	Name attribute for the radio group
`value`	`string`	—	Value of the radio option
`label`	`string`	—	Label text for the radio option
`checked`	`boolean`	`false`	Whether the radio is checked
`onChange`	`(value: string) => void`	—	Change handler for the radio
`disabled`	`boolean`	`false`	Whether the radio is disabled
`className`	`string`	`""`	Additional CSS classes
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the radio button

Examples

Example 1

<> example.tsx

// Basic radio
<Radio name="option" value="option1" label="Option 1" />

Example 2

<> example.tsx

// Radio group
<div>
  <Radio name="color" value="red" label="Red" />
  <Radio name="color" value="blue" label="Blue" />
  <Radio name="color" value="green" label="Green" />
</div>

Example 3

<> example.tsx

// Different sizes
<Radio name="size" value="sm" label="Small" size="sm" />
<Radio name="size" value="md" label="Medium" size="md" />
<Radio name="size" value="lg" label="Large" size="lg" />

Example 4

<> example.tsx

// Controlled radio group
<Radio 
  name="choice" 
  value="option1" 
  label="Option 1"
  checked={selectedValue === 'option1'}
  onChange={setSelectedValue}
/>