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 |
|---|---|---|---|
Prop id | Type string | Default value undefined | Description Unique identifier for the input element. Auto-generated if not provided. |
Prop label | Type ReactNode | Default value "" | Description Label text or content displayed above or beside the input field |
Prop placeholder | Type string | Default value "" | Description Placeholder text displayed when the input is empty |
Prop value | Type string | Default value "" | Description Current value of the input. Required for controlled components. |
Prop onChange | Type (value: string, e?: ChangeEvent) => void | Default value undefined | Description Callback when input value changes. Receives the new value as first parameter. |
Prop size | Type "sm" | "md" | "lg" | Default value "md" | Description Size variant of the text field |
Prop error | Type boolean | Default value false | Description Whether the field is in an error state, typically shown with red styling |
Prop disabled | Type boolean | Default value false | Description Whether the input is disabled and cannot be interacted with |
Prop type | Type "text" | "email" | "tel" | "url" | Default value "text" | Description Input type for validation and mobile keyboard optimization |
Prop clear | Type boolean | Default value false | Description Whether to show a clear button when the input has content |
Prop loading | Type boolean | Default value false | Description Whether to show a loading spinner in the input |
Prop orientation | Type "vertical" | "horizontal" | Default value "vertical" | Description Orientation of the label relative to the input field |
Quick start
TextField is a controlled component - manage state with useState:
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
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
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
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}
/>
)
}