radio

registry:ui

radio button groups with ascii indicators

installation

npx shadcn@latest add https://asciicn.fldr.zip/r/radio.json

usage

import { RadioGroup, RadioItem } from "@/components/ascii/radio";

export default function Example() {
  const [value, setValue] = useState("option1");

  return (
    <RadioGroup 
      value={value} 
      onValueChange={setValue}
      name="example"
    >
      <RadioItem value="option1" label="option one" />
      <RadioItem value="option2" label="option two" />
      <RadioItem value="option3" label="option three" />
    </RadioGroup>
  );
}

examples

basic

selected: dark

text variant (default)

icon variant

disabled

individual disabled items

without labels

props

RadioGroup

prop
type
description
value
string
current selected value
onValueChange
function
callback when value changes
name
string
name for the radio group
disabled
boolean
disable all radio items

RadioItem

prop
type
description
value
string
unique value for this option
label
string
optional label text
disabled
boolean
disable this specific item
variant
string
optional variant for the radio item