Delta Components

Docs

Radio Input

A flexible radio group component with labels, descriptions, validation, and Zod integration for single-choice selections.

Preview

Code

Open in

Notification Preferences

How would you like to receive notifications?

Get updates via email

SMS

Get updates via text message

Push Notifications

Get updates via push notifications

Overview

The Radio Input component provides an accessible and flexible solution for single-choice selections, essential for forms requiring mutually exclusive options. It supports both vertical and horizontal layouts with rich option descriptions, individual option disabling, and comprehensive validation. Perfect for preference settings, plan selections, and any scenario requiring clear single-choice decisions with optimal user experience.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/radio-input.json

Usage

"use client"
 
import { Building, Globe, Users } from "lucide-react"
 
import { RadioInput } from "@/registry/inputs/radio-input"
 
export function Component() {
  const options = [
    {
      value: "small",
      label: "Small",
      description: "Perfect for individuals",
      icon: <Users className="w-4 h-4" />,
    },
    {
      value: "medium",
      label: "Medium",
      description: "Great for small teams",
      icon: <Building className="w-4 h-4" />,
    },
    {
      value: "large",
      label: "Large",
      description: "Ideal for organizations",
      icon: <Globe className="w-4 h-4" />,
    },
  ]
 
  return (
    <RadioInput
      label="Plan Size"
      name="planSize"
      options={options}
      required
      onValueChange={(value) => console.log("Selected:", value)}
    />
  )
}

API Reference

Props

Prop	Type	Default	Description
`label`	`string`	-	Label for the radio group (required)
`name`	`string`	-	Name of the radio group for form submission (required)
`options`	`RadioOption[]`	-	Array of radio options (required)
`description`	`string`	`undefined`	Description text below the label
`error`	`string`	`undefined`	Error message to display
`required`	`boolean`	`false`	Whether the field is required
`pending`	`boolean`	`false`	Whether the field is in a loading state
`defaultValue`	`string`	`undefined`	Default selected value
`value`	`string`	`undefined`	Controlled selected value
`disabled`	`boolean`	`false`	Whether the radio group is disabled
`id`	`string`	`name`	ID for the radio group
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Layout orientation
`variant`	`"default" \| "pill"`	`"default"`	Radio input styling variant
`labelVariant`	`"default" \| "muted"`	`"default"`	Label text styling variant
`containerClassName`	`string`	`""`	CSS classes for the container
`radioGroupClassName`	`string`	`""`	CSS classes for the radio group
`radioItemClassName`	`string`	`""`	CSS classes for radio items
`labelClassName`	`string`	`""`	CSS classes for the label
`schema`	`ZodType<string>`	`undefined`	Zod schema for validation
`onValidate`	`(isValid: boolean, value: string, error?: string) => void`	`undefined`	Validation callback
`onValueChange`	`(value: string) => void`	`undefined`	Callback when selection changes
`allowNoSelection`	`boolean`	`false`	Whether to allow no selection (no default value)

RadioOption Interface

interface RadioOption {
  value: string
  label: string
  description?: string
  disabled?: boolean
  icon?: React.ReactNode
}

Examples

Pill Variant

Modern pill-style radio input with colored border and enhanced visual design for plan selection.

Preview

Code

Open in

Choose Your Plan

Select the plan that best fits your needs

Starter Plan

Perfect for individuals just getting started

Pro Plan

Best for growing teams and businesses

Enterprise Plan

Custom solutions for large organizations

With Icons

Radio input options enhanced with SVG icons or images positioned on the right side, perfect for payment methods, features, or visual categorization.

Preview

Code

Open in

AI Model Selection

Choose your preferred language model

Claude (Anthropic)

Advanced reasoning and analysis capabilities

Gemini (Google)

Multimodal AI with integrated Google services

ChatGPT (OpenAI)

Versatile language model for various tasks

No Default Selection

Radio input that allows no initial selection by setting allowNoSelection={true}, useful for optional choices where users should actively make a decision rather than having a pre-selected option.

Preview

Code

Open in

Choose a plan

Select the plan that best fits your needs

Small

Perfect for personal projects

Medium

Great for small teams

Large

Ideal for enterprise use