Koori UI
Components

GlassRadioGroup

A glassmorphism-styled radio group powered by Radix UI, composed of a Root and Item.

Preview

Usage

import { GlassRadioGroup, GlassRadioItem } from "koori-ui";
 
<GlassRadioGroup defaultValue="option-a">
  <GlassRadioItem id="a" value="option-a" label="Option A" />
  <GlassRadioItem id="b" value="option-b" label="Option B" />
  <GlassRadioItem id="c" value="option-c" label="Option C" />
</GlassRadioGroup>

Controlled

import { useState } from "react";
import { GlassRadioGroup, GlassRadioItem } from "koori-ui";
 
function Example() {
  const [value, setValue] = useState("light");
  return (
    <GlassRadioGroup value={value} onValueChange={setValue}>
      <GlassRadioItem id="light" value="light" label="Light" />
      <GlassRadioItem id="dark" value="dark" label="Dark" />
      <GlassRadioItem id="system" value="system" label="System" />
    </GlassRadioGroup>
  );
}

Props — GlassRadioGroup

PropTypeDefaultDescription
valuestringControlled selected value
defaultValuestringInitial value (uncontrolled)
onValueChange(value: string) => voidCallback when selection changes
orientation"horizontal" | "vertical""vertical"Layout direction

All Radix RadioGroup.Root props are also accepted.

Props — GlassRadioItem

PropTypeDefaultDescription
valuestringValue associated with this item (required)
labelstringOptional label rendered beside the radio button
idstringHTML id, links the label for accessibility
disabledbooleanfalseDisables this item

On this page