RadioGroup

"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Field, Radio, RadioGroup } from "@optiaxiom/react";
 
export function App({
  description,
  error,
  label = "Input label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
    >
      <RadioGroup name="usage">
        <Radio value="one">Option One</Radio>
        <Radio value="two">Option Two</Radio>
        <Radio value="three">Option Three</Radio>
      </RadioGroup>
    </Field>
  );
}

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup name="label-usage">
      <Radio value="one" />
      <Radio value="two">Option Two</Radio>
    </RadioGroup>
  );
}

"use client";
 
import { Button, Group, Radio, RadioGroup } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Group flexDirection="column" gap="16">
      <RadioGroup
        name="controlled-usage"
        onValueChange={setValue}
        value={value}
      >
        <Radio value="one">Option One</Radio>
        <Radio value="two">Option Two</Radio>
        <Radio value="three">Option Three</Radio>
      </RadioGroup>
      <Button disabled={!value} onClick={() => setValue("")}>
        Reset
      </Button>
    </Group>
  );
}

"use client";
 
import {
  Button,
  Field,
  Group,
  Input,
  Radio,
  RadioGroup,
} from "@optiaxiom/react";
import { Controller, useForm } from "react-hook-form";
 
export function App() {
  const {
    control,
    formState: { errors },
    handleSubmit,
    register,
  } = useForm<{
    name: string;
    priority: string;
  }>();
 
  return (
    <form
      noValidate
      onSubmit={handleSubmit((data) => {
        console.log(data);
      })}
    >
      <Group flexDirection="column" gap="16">
        <Field error={errors.name?.message} label="Name" required>
          <Input
            {...register("name", { required: "Please enter a name" })}
            placeholder="Enter name"
          />
        </Field>
 
        <Controller
          control={control}
          name="priority"
          render={({ field }) => (
            <Field error={errors.priority?.message} label="Priority" required>
              <RadioGroup
                name="form-hook-form-usage"
                onValueChange={field.onChange}
                value={field.value ?? ""}
              >
                <Radio value="low">Low</Radio>
                <Radio value="medium">Medium</Radio>
                <Radio value="high">High</Radio>
              </RadioGroup>
            </Field>
          )}
          rules={{ required: "Please select a priority" }}
        />
 
        <Button alignSelf="start" type="submit">
          Submit
        </Button>
      </Group>
    </form>
  );
}

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup disabled name="disabled-group-usage" value="one">
      <Radio value="one">Option One</Radio>
      <Radio value="two">Option Two</Radio>
    </RadioGroup>
  );
}

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup name="disabled-usage">
      <Radio defaultChecked value="one">
        Option One
      </Radio>
      <Radio disabled value="two">
        Option Two
      </Radio>
      <Radio value="three">Option Three</Radio>
    </RadioGroup>
  );
}

import { Radio, RadioGroup } from "@optiaxiom/react";
 
export function App() {
  return (
    <RadioGroup name="description-usage">
      <Radio description="Helper Text" value="one">
        Option One
      </Radio>
      <Radio value="two">Option Two</Radio>
    </RadioGroup>
  );
}

"use client";
 
import { Button, Field, Group, Radio, RadioGroup } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
  const [error, setError] = useState("");
 
  return (
    <Group flexDirection="column" gap="16">
      <Field error={error || undefined} label="Preferred contact method">
        <RadioGroup
          name="error-usage"
          onValueChange={(val) => {
            setValue(val);
            setError("");
          }}
          value={value}
        >
          <Radio value="email">Email</Radio>
          <Radio value="phone">Phone</Radio>
          <Radio value="mail">Mail</Radio>
        </RadioGroup>
      </Field>
      <Button
        alignSelf="start"
        onClick={() => {
          if (!value) {
            setError("Please select a contact method");
          }
        }}
      >
        Submit
      </Button>
    </Group>
  );
}

"use client";
 
import { Field, Group, Input, Radio, RadioGroup } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [method, setMethod] = useState("standard");
 
  return (
    <Group flexDirection="column" gap="16" w="224">
      <Field label="Shipping method">
        <RadioGroup
          name="pattern-conditional-usage"
          onValueChange={setMethod}
          value={method}
        >
          <Radio value="standard">Standard</Radio>
          <Radio value="express">Express</Radio>
          <Radio value="pickup">Pickup</Radio>
        </RadioGroup>
      </Field>
 
      {method === "express" && (
        <Field label="Phone number for delivery updates">
          <Input placeholder="Enter phone number" type="tel" />
        </Field>
      )}
 
      {method === "pickup" && (
        <Field label="Store location">
          <RadioGroup name="pattern-conditional-store">
            <Radio value="downtown">Downtown</Radio>
            <Radio value="midtown">Midtown</Radio>
            <Radio value="uptown">Uptown</Radio>
          </RadioGroup>
        </Field>
      )}
    </Group>
  );
}