1. Components
  2. radio

Radio

Select a single option from a set of choices.

Demo

Billing CycleSelect how often you'd like to be billed
// import { Radio } from "@/components/ui/radio"

import { Label, Description } from "@/components/jk/input"
import { Radio, RadioGroup } from "@/components/jk/radio"



export const RadioDemo = () => {
    return (
        <div>
            <RadioGroup>
                <Label>Billing Cycle</Label>
                <Description>Select how often you&apos;d like to be billed</Description>

                <Radio value="monthly">
                    <Label>Monthly</Label>
                    <Description>Billed every month</Description>
                </Radio>
                <Radio value="quarterly">
                    <Label>Quarterly</Label>
                    <Description>Billed every 3 months</Description>
                </Radio>
                <Radio value="yearly">
                    <Label>Yearly</Label>
                    <Description>Billed once per year with a discount</Description>
                </Radio>
            </RadioGroup>
        </div>
    )
}