Radio

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function Basic() {
  return (
    <RadioGroup defaultValue="option-one">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="basic-one" id="basic-one" />
        <Label htmlFor="basic-one">I accept</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="basic-two" id="basic-two" />
        <Label htmlFor="basic-two">I do not accept</Label>
      </div>
    </RadioGroup>
  );
}

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function Disabled() {
  return (
    <RadioGroup defaultValue="option-one" disabled>
      <div className="flex items-center gap-2">
        <RadioGroupItem
          value="disabled-one"
          id="disabled-one"
          disabled
          checked
        />
        <Label htmlFor="disabled-one">I accept</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="disabled-two" id="disabled-two" disabled />
        <Label htmlFor="disabled-two">I do not accept</Label>
      </div>
    </RadioGroup>
  );
}

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function RadioError() {
  return (
    <RadioGroup defaultValue="option-one">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="error-one" id="error-one" />
        <Label htmlFor="error-one">I accept</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="error-two" id="error-two" />
        <Label htmlFor="error-two">I do not accept</Label>
      </div>
      <p className="text-xs font-medium text-red-600">
        You have to accept to continue
      </p>
    </RadioGroup>
  );
}

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function Horizontal() {
  return (
    <RadioGroup className="space-y-2">
      <legend className="text-sm font-medium text-muted-foreground">
        Privacy:
      </legend>
      <div className="flex flex-col space-y-2 md:flex-row md:space-x-6 md:space-y-0">
        <div className="flex items-center gap-2">
          <RadioGroupItem value="private-one" id="private-one" />
          <Label htmlFor="private-one">Private (Only Me)</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="link-one" id="link-one" />
          <Label htmlFor="link-one">Shared via Link</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="public-one" id="public-one" />
          <Label htmlFor="public-one">Public</Label>
        </div>
      </div>
    </RadioGroup>
  );
}

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

export default function WithDescription() {
  return (
    <RadioGroup className="space-y-4">
      <div className="flex gap-2">
        <RadioGroupItem value="tasks-one" id="tasks-one" />
        <Label htmlFor="tasks-one" className="flex-col items-start">
          <span>Tasks</span>
          <span className="font-normal text-muted-foreground">
            Get notified if there are new tasks added to your project, or if a
            task is completed.
          </span>
        </Label>
      </div>
      <div className="flex gap-2">
        <RadioGroupItem value="projects-one" id="projects-one" />
        <Label htmlFor="projects-one" className="flex-col items-start">
          <span>Projects</span>
          <span className="font-normal text-muted-foreground">
            Get notified if there&#x27;s are new projects added to your teams.
          </span>
        </Label>
      </div>
    </RadioGroup>
  );
}