Radio

"use client"

import { Description, Label } from "@/components/ui/preskok-ui/field"
import { Radio, RadioGroup } from "@/components/ui/preskok-ui/radio"

export function RadioGroupDemo() {
  return (
    <RadioGroup name="vehicleType">
      <Label>Vehicle Type</Label>
      <Description>
        Select the type of vehicle you&apos;re interested in
      </Description>

      <Radio value="sedan">
        <Label>Sedan</Label>
        <Description>Comfortable 4-door vehicle with trunk storage</Description>
      </Radio>
      <Radio value="suv">
        <Label>SUV</Label>
        <Description>Spacious vehicle with higher ground clearance</Description>
      </Radio>
      <Radio value="electric">
        <Label>Electric</Label>
        <Description>
          Zero-emission vehicle with lower operating costs
        </Description>
      </Radio>
    </RadioGroup>
  )
}

"use client"

import { Form } from "react-aria-components"

import { Button } from "@/components/ui/preskok-ui/button"
import { Description, Label } from "@/components/ui/preskok-ui/field"
import { Radio, RadioGroup } from "@/components/ui/preskok-ui/radio"

export function RadioValidationDemo() {
  return (
    <Form onSubmit={() => {}} className="space-y-4">
      <RadioGroup isRequired name="powertrain">
        <Label>Powertrain</Label>
        <Description>Choose the drivetrain for your next vehicle</Description>

        <Radio value="hybrid">
          <Label>Hybrid</Label>
          <Description>
            Balanced fuel economy with quick city acceleration.
          </Description>
        </Radio>

        <Radio value="electric">
          <Label>Electric</Label>
          <Description>
            Quiet performance with zero tailpipe emissions.
          </Description>
        </Radio>

        <Radio value="gasoline">
          <Label>Gasoline</Label>
          <Description>
            Traditional setup with broad refueling availability.
          </Description>
        </Radio>
      </RadioGroup>

      <Button type="submit" intent="secondary">
        Submit
      </Button>
    </Form>
  )
}

"use client"

import { useState } from "react"

import { Description, Label } from "@/components/ui/preskok-ui/field"
import { Radio, RadioGroup } from "@/components/ui/preskok-ui/radio"

export function RadioControlledDemo() {
  const [selected, setSelected] = useState("")

  return (
    <div className="flex flex-col gap-2">
      <RadioGroup
        value={selected}
        onChange={setSelected}
        className="flex flex-col"
      >
        <Label>Body style</Label>
        <Radio value="sedan">Sedan</Radio>
        <Radio value="suv">SUV</Radio>
        <Radio value="coupe">Coupe</Radio>
        <Radio value="hatchback">Hatchback</Radio>
        <Radio value="truck">Truck</Radio>
      </RadioGroup>

      <Description className="[&>strong]:text-foreground block">
        Selected body style: <strong>{selected || "-"}</strong>
      </Description>
    </div>
  )
}