TextBox.mdā¢3.55 kB
---
name: TextBox
category: forms
description: A versatile text input component with validation, labels, and error states
importPath: '@your-library/TextBox'
status: stable
version: 2.0.1
dependencies: ['Icon', 'FormField']
---
# TextBox Component
The TextBox component is a flexible input field that supports various text input types with built-in validation and accessibility features.
## Usage
```tsx
import { TextBox } from '@your-library/TextBox';
function MyForm() {
return (
<>
<TextBox
label="Username"
name="username"
placeholder="Enter username"
required
/>
<TextBox
label="Email"
name="email"
type="email"
validation="email"
/>
</>
);
}
```
## Props
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| name | `string` | Yes | - | Field name for form submission |
| label | `string` | No | - | Label text displayed above input |
| type | `'text' \| 'email' \| 'password' \| 'number' \| 'tel' \| 'url'` | No | 'text' | Input type |
| placeholder | `string` | No | - | Placeholder text |
| value | `string \| number` | No | - | Controlled value |
| defaultValue | `string \| number` | No | - | Default value for uncontrolled input |
| onChange | `(value: string, event: ChangeEvent) => void` | No | - | Change handler |
| validation | `'email' \| 'phone' \| 'url' \| ValidationRule` | No | - | Validation rule |
| required | `boolean` | No | false | Whether field is required |
| disabled | `boolean` | No | false | Disable input |
| readOnly | `boolean` | No | false | Make input read-only |
| error | `string` | No | - | Error message to display |
| helperText | `string` | No | - | Helper text below input |
| icon | `ReactNode` | No | - | Icon to display in input |
| iconPosition | `'left' \| 'right'` | No | 'left' | Icon position |
| size | `'small' \| 'medium' \| 'large'` | No | 'medium' | Input size |
| variant | `'outline' \| 'filled' \| 'underline'` | No | 'outline' | Visual variant |
| className | `string` | No | - | Additional CSS classes |
## Variants
### Outline (Default)
```tsx
<TextBox label="Name" variant="outline" />
```
### Filled
```tsx
<TextBox label="Name" variant="filled" />
```
### Underline
```tsx
<TextBox label="Name" variant="underline" />
```
## Validation
### Built-in Validators
```tsx
// Email validation
<TextBox type="email" validation="email" />
// Phone validation
<TextBox type="tel" validation="phone" />
// URL validation
<TextBox type="url" validation="url" />
```
### Custom Validation
```tsx
<TextBox
validation={{
pattern: /^[A-Za-z]+$/,
message: 'Only letters allowed',
minLength: 3,
maxLength: 20
}}
/>
```
## With Icons
```tsx
import { Search, Lock } from '@your-library/icons';
// Search input
<TextBox
icon={<Search />}
placeholder="Search..."
/>
// Password with icon
<TextBox
type="password"
icon={<Lock />}
iconPosition="left"
placeholder="Enter password"
/>
```
## Sizes
```tsx
<TextBox size="small" placeholder="Small input" />
<TextBox size="medium" placeholder="Medium input" />
<TextBox size="large" placeholder="Large input" />
```
## Error States
```tsx
<TextBox
label="Email"
error="Invalid email address"
helperText="We'll never share your email"
/>
```
## Accessibility
The TextBox component includes:
- Proper ARIA labels and descriptions
- Keyboard navigation support
- Screen reader announcements for errors
- Focus management
- High contrast mode support