Delta Components

Docs

Text Input

A flexible text input component with validation, variants, and Zod integration for modern forms.

15 views

2 downloads

Based onStripe Checkout

Demo

Code

Open in

Username

Enter a unique username for your account

Overview

The Text Input component provides a robust foundation for single-line text entry with comprehensive validation and styling options, essential for user data collection in modern forms. It supports both default and pill variants with customizable borders, real-time validation, and excellent accessibility features. Perfect for email addresses, usernames, search fields, and any scenario requiring clean, validated text input with optimal user experience.

Installation

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

Usage

1"use client"
2
3import { TextInput } from "@/registry/inputs/text-input"
4
5export function Component() {
6  return (
7    <TextInput
8      label="Email Address"
9      name="email"
10      type="email"
11      placeholder="Enter your email"
12      description="We'll use this to send you updates"
13      required
14      onChange={(e) => console.log("Value:", e.target.value)}
15    />
16  )
17}

API Reference

Props

Prop	Type	Default	Description
`label`	`string`	-	Label for the input field (required)
`name`	`string`	-	Name of the input field for form submission (required)
`description`	`string`	`undefined`	Description text below the label
`hint`	`string`	`undefined`	Hint text below the input
`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 value for the input
`disabled`	`boolean`	`false`	Whether the input is disabled
`id`	`string`	`name`	ID for the input element
`type`	`string`	`"text"`	HTML input type
`placeholder`	`string`	`undefined`	Placeholder text
`variant`	`"default" \| "pill"`	`"default"`	Visual variant of the input
`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
`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