Note: This project is still in development and has not been publicly released. Coming soon.
Docs
Radio Input
Radio Input

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

19 views
4 downloads
Loading...

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

1"use client"
2
3import { Building, Globe, Users } from "lucide-react"
4
5import { RadioInput } from "@/registry/inputs/radio-input"
6
7export function Component() {
8 const options = [
9 {
10 value: "small",
11 label: "Small",
12 description: "Perfect for individuals",
13 icon: <Users className="w-4 h-4" />,
14 },
15 {
16 value: "medium",
17 label: "Medium",
18 description: "Great for small teams",
19 icon: <Building className="w-4 h-4" />,
20 },
21 {
22 value: "large",
23 label: "Large",
24 description: "Ideal for organizations",
25 icon: <Globe className="w-4 h-4" />,
26 },
27 ]
28
29 return (
30 <RadioInput
31 label="Plan Size"
32 name="planSize"
33 options={options}
34 required
35 onValueChange={(value) => console.log("Selected:", value)}
36 />
37 )
38}

API Reference

Props

PropTypeDefaultDescription
labelstring-Label for the radio group (required)
namestring-Name of the radio group for form submission (required)
optionsRadioOption[]-Array of radio options (required)
descriptionstringundefinedDescription text below the label
errorstringundefinedError message to display
requiredbooleanfalseWhether the field is required
pendingbooleanfalseWhether the field is in a loading state
defaultValuestringundefinedDefault selected value
valuestringundefinedControlled selected value
disabledbooleanfalseWhether the radio group is disabled
idstringnameID 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
containerClassNamestring""CSS classes for the container
radioGroupClassNamestring""CSS classes for the radio group
radioItemClassNamestring""CSS classes for radio items
labelClassNamestring""CSS classes for the label
schemaZodType<string>undefinedZod schema for validation
onValidate(isValid: boolean, value: string, error?: string) => voidundefinedValidation callback
onValueChange(value: string) => voidundefinedCallback when selection changes
allowNoSelectionbooleanfalseWhether to allow no selection (no default value)

RadioOption Interface

1interface RadioOption {
2 value: string
3 label: string
4 description?: string
5 disabled?: boolean
6 icon?: React.ReactNode
7}

Examples

Pill Variant

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

Loading...

With Icons

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

Loading...

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.

Loading...