RadioGroup

import { useState } from "react";
import { RadioGroup } from "density-base-ui";

export default function RadioExample() {
  const [density, setDensity] = useState("compact");
  const updateDensity = (value: unknown) => {
    if (typeof value === "string") {
      setDensity(value);
    }
  };
  return (
    <RadioGroup
      value={density}
      onValueChange={updateDensity}
      items={[
        { value: "compact", label: "Compact" },
        { value: "comfortable", label: "Comfortable" },
      ]}
    />
  );
}

import { RadioGroup } from "density-base-ui";

export default function RadioFieldExample() {
  return (
    <RadioGroup
      label="Theme"
      hint="Applied to this workspace."
      items={[
        { value: "light", label: "Light" },
        { value: "dark", label: "Dark" },
      ]}
      value="dark"
    />
  );
}

import { RadioGroup } from "density-base-ui";

export default function RadioErrorExample() {
  return (
    <RadioGroup
      errorMessage="Choose a theme."
      hint="Applied to this workspace."
      items={[
        { value: "light", label: "Light" },
        { value: "dark", label: "Dark" },
      ]}
      label="Theme"
    />
  );
}

import { RadioGroup, Separator, View } from "density-base-ui";

const items = [{ value: "on", label: "Enabled" }];

export default function RadioFieldOrientationExample() {
  return (
    <View>
      <RadioGroup
        fieldOrientation="vertical"
        label="Vertical"
        items={items}
        value="on"
      />
      <Separator />
      <RadioGroup
        fieldOrientation="horizontal"
        label="Horizontal"
        items={items}
        value="on"
      />
    </View>
  );
}

import { RadioGroup, View } from "density-base-ui";

const items = [{ value: "on", label: "Enabled" }];

export default function RadioEmphasisExample() {
  return (
    <View>
      <RadioGroup
        aria-label="Primary radio"
        emphasis="primary"
        items={items}
        value="on"
      />
      <RadioGroup
        aria-label="Secondary radio"
        emphasis="secondary"
        items={items}
        value="on"
      />
      <RadioGroup
        aria-label="Outline radio"
        emphasis="outline"
        items={items}
        value="on"
      />
      <RadioGroup
        aria-label="Ghost radio"
        emphasis="ghost-primary"
        items={items}
        value="on"
      />
    </View>
  );
}

import { RadioGroup, View } from "density-base-ui";

const items = [{ value: "on", label: "Enabled" }];

export default function RadioSizeExample() {
  return (
    <View>
      <RadioGroup aria-label="2xs radio" items={items} size="2xs" value="on" />
      <RadioGroup aria-label="xs radio" items={items} size="xs" value="on" />
      <RadioGroup aria-label="sm radio" items={items} size="sm" value="on" />
      <RadioGroup aria-label="md radio" items={items} size="md" value="on" />
      <RadioGroup aria-label="lg radio" items={items} size="lg" value="on" />
      <RadioGroup aria-label="xl radio" items={items} size="xl" value="on" />
      <RadioGroup aria-label="2xl radio" items={items} size="2xl" value="on" />
      <RadioGroup aria-label="3xl radio" items={items} size="3xl" value="on" />
    </View>
  );
}