---
title: Text field
description: Text fields allow users to enter text-based data in forms and inputs.
category: Forms
related: [Label, Container, Button, Dialog, FormContainer]
commonPatterns: [form-input, search-input, controlled-input]
---

Source: https://clickhouse.design/click-ui/textField

# Text field

Text fields allow users to enter text-based data in forms and inputs. They support labels, placeholders, error states, and various sizes.

## Example

## Props

| Prop         | Type                                       | Default value | Description                                                                             |
| ------------ | ------------------------------------------ | ------------- | --------------------------------------------------------------------------------------- |
| id           | `string`                                   | `undefined`   | Unique identifier for the input element. Auto-generated if not provided.                |
| label        | `ReactNode`                                | `""`          | Label text or content displayed above or beside the input field                         |
| placeholder  | `string`                                   | `""`          | Placeholder text displayed when the input is empty                                      |
| value        | `string`                                   | `""`          | Current value of the input. Required for controlled components.                         |
| onChange     | `(value: string, e?: ChangeEvent) => void` | `undefined`   | Callback when input value changes. Receives the new value as first parameter.           |
| size         | `"sm" \| "md" \| "lg"`                     | `"md"`        | Size variant of the text field                                                          |
| error        | `boolean`                                  | `false`       | Whether the field is in an error state, typically shown with red styling                |
| disabled     | `boolean`                                  | `false`       | Whether the input is disabled and cannot be interacted with                             |
| type         | `"text" \| "email" \| "tel" \| "url"`      | `"text"`      | Input type for validation and mobile keyboard optimization                              |
| clear        | `boolean`                                  | `false`       | Whether to show a clear button when the input has content                               |
| loading      | `boolean`                                  | `false`       | Whether to show a loading spinner in the input                                          |
| orientation  | `"vertical" \| "horizontal"`               | `"vertical"`  | Orientation of the label relative to the input field                                    |
| dir          | `"start" \| "end"`                         | `undefined`   | The direction/position of the label - start places label before, end places label after |
| labelColor   | `string`                                   | `undefined`   | Custom color for the label text                                                         |
| startContent | `ReactNode`                                | `undefined`   | Additional content to display on the left side of the input                             |
| endContent   | `ReactNode`                                | `undefined`   | Additional content to display on the right side of the input                            |

```tsx
import { TextField } from '@clickhouse/click-ui'

<TextField 
id="example"
label="Name"
value={value}
onChange={(value) => setValue(value)}
placeholder="Enter name"
/>
```

## Quick start

TextField is a controlled component - manage state with useState:

```tsx
const [value, setValue] = useState('')

<TextField
id="name"
label="Name"
value={value}
onChange={(value) => setValue(value)}
/>
```

## Related components

- **Label**: Use with TextField for accessible form labels
- **Container**: Use to layout multiple TextFields in forms
- **Button**: Use with TextField for form submission
- **Dialog**: Use TextField inside Dialog for modal forms
- **PasswordField**: For password inputs with show/hide toggle

## Common use cases

### Basic text input

```tsx
import { TextField } from '@clickhouse/click-ui'
import { useState } from 'react'

function BasicInput() {
const [name, setName] = useState('')

return (
  <TextField
    id="name-input"
    label="Name"
    value={name}
    onChange={(value) => setName(value)}
    placeholder="Enter your name"
  />
)
}
```

### Form with multiple fields

```tsx
import { TextField, Container } from '@clickhouse/click-ui'
import { useState } from 'react'

function FormFields() {
const [name, setName] = useState('')
const [email, setEmail] = useState('')

return (
  <Container orientation='vertical' gap='md'>
    <TextField
      id="name-input"
      label="Name"
      value={name}
      onChange={(value) => setName(value)}
    />
    <TextField
      id="email-input"
      label="Email"
      type="email"
      value={email}
      onChange={(value) => setEmail(value)}
    />
  </Container>
)
}
```

### Error state

```tsx
import { TextField } from '@clickhouse/click-ui'
import { useState } from 'react'

function ErrorInput() {
const [value, setValue] = useState('')
const hasError = value.length > 0 && value.length < 3

return (
  <TextField
    id="username-input"
    label="Username"
    value={value}
    onChange={(value) => setValue(value)}
    error={hasError}
  />
)
}
```

## Variants

### States

**With Label**

**Error State**