Docs
Select Input
Select Input
A versatile dropdown select component with pill variant support, validation, and Zod integration for efficient option selection.
18 views
2 downloads
Based onStripe Checkout
Loading...
Overview
The Select Input component delivers an intuitive dropdown selection experience with both default and pill variants, making it essential for forms requiring single-option choices from larger datasets. It features native and custom dropdown implementations, comprehensive validation, and accessibility support. Perfect for category selections, filtering interfaces, and any scenario where users need to choose from multiple predefined options.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/select-input.json
Usage
1"use client"23import { SelectInput } from "@/registry/inputs/select-input"45export function Component() {6 const options = [7 { value: "starter", label: "Starter Plan" },8 { value: "professional", label: "Professional Plan" },9 { value: "enterprise", label: "Enterprise Plan" },10 ]1112 return (13 <SelectInput14 label="Subscription Plan"15 name="plan"16 options={options}17 placeholder="Choose your plan"18 required19 onValueChange={(value) => console.log("Selected:", value)}20 />21 )22}
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Label for the select field (required) |
name | string | - | Name of the select field for form submission (required) |
options | SelectOption[] | - | Options for the dropdown (required) |
description | string | undefined | Description text below the label |
hint | string | undefined | Hint text below the select |
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 |
placeholder | string | "Select an option" | Placeholder text when no option is selected |
disabled | boolean | false | Whether the select is disabled |
id | string | name | ID for the select element |
variant | "default" | "pill" | "default" | Visual variant of the select |
coloredBorder | boolean | false | Whether to show colored border (pill variant) |
labelVariant | "default" | "muted" | "default" | Label text styling variant |
containerClassName | string | "" | CSS classes for the container |
selectClassName | string | "" | CSS classes for the select trigger |
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 |
SelectOption Interface
1interface SelectOption {2 value: string3 label: string4 disabled?: boolean5}
Examples
Pill Variant
Rounded pill variant with muted background styling for modern form interfaces.
Loading...
