Text area
Text areas allow users to enter multi-line text content. They are ideal for longer form inputs like comments, descriptions, or messages.
Example
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop placeholder | Type string | Default value "" | Description Placeholder text displayed when the textarea is empty |
Prop label | Type ReactNode | Default value "" | Description Label text or content displayed above or beside the textarea |
Prop size | Type "sm" | "md" | "lg" | Default value "md" | Description Size variant of the textarea |
Prop error | Type boolean | Default value false | Description Whether the textarea is in an error state, typically shown with red styling |
Prop disabled | Type boolean | Default value false | Description Whether the textarea is disabled and cannot be interacted with |
Prop rows | Type number | Default value 4 | Description Number of visible text rows in the textarea |
Quick start
import { TextAreaField as TextArea } from '@clickhouse/click-ui'
import { useState } from 'react'
function MyTextArea() {
const [value, setValue] = useState('')
return (
<TextArea
id="comments"
label="Comments"
placeholder="Enter your comments..."
onChange={(value, e) => setValue(value)}
/>
)
}Related components
- TextField: For single-line text input.
- Label: Provides accessible labels for text areas.
- Container: For organizing text areas within forms.
Common use cases
Form comments
import { TextAreaField as TextArea } from '@clickhouse/click-ui'
import { useState } from 'react'
function FormComments() {
const [comments, setComments] = useState('')
return (
<TextArea
id="comments"
label="Additional Comments"
placeholder="Enter any additional comments..."
onChange={(value, e) => setComments(value)}
rows={5}
/>
)
}Description input
import { TextAreaField as TextArea } from '@clickhouse/click-ui'
import { useState } from 'react'
function DescriptionInput() {
const [description, setDescription] = useState('')
return (
<TextArea
id="description"
label="Description"
placeholder="Enter a description..."
onChange={(value, e) => setDescription(value)}
rows={6}
/>
)
}Long text input
Message (max 500 characters)
import { TextAreaField as TextArea, Container, Text } from '@clickhouse/click-ui'
import { useState } from 'react'
function LongTextInput() {
const [message, setMessage] = useState('')
return (
<Container orientation='vertical' gap='sm'>
<Text size='sm' color='muted'>Message (max 500 characters)</Text>
<TextArea
id="message"
label="Message"
placeholder="Enter your message..."
onChange={(value, e) => setMessage(value)}
rows={8}
/>
</Container>
)
}