Radio

"use client";

import { useState } from "react";
import { Radio, Text, VStack } from "astralis-ui";

export function RadioDemo() {
  const [plan, setPlan] = useState("pro");

  return (
    <VStack gap="3" alignItems="start">
      <Radio.Group value={plan} onChange={setPlan}>
        <Radio value="free">Free: 3 projects</Radio>
        <Radio value="pro">Pro: unlimited projects</Radio>
        <Radio value="team">Team: everything, plus SSO</Radio>
      </Radio.Group>
      <Text size="xs" color="muted">Selected plan: {plan}</Text>
    </VStack>
  );
}

"use client";

import { Radio, VStack } from "astralis-ui";

export function RadioHorizontal() {
  return (
    <VStack gap="4" alignItems="start">
      <Radio.Group defaultValue="md" orientation="horizontal" colorScheme="teal">
        <Radio value="sm" size="sm">Small</Radio>
        <Radio value="md">Medium</Radio>
        <Radio value="lg" size="lg">Large</Radio>
      </Radio.Group>
      <Radio.Group defaultValue="a" orientation="horizontal" disabled>
        <Radio value="a">Disabled group</Radio>
        <Radio value="b">Also disabled</Radio>
      </Radio.Group>
    </VStack>
  );
}