Textarea
Installation
npx shadcn@latest add https://ui.timkit.cn/r/textarea.json
Usage
import { Textarea } from "@/components/ui/textarea"
Examples
Textarea · Simple textarea
Loading preview...
Textarea · Destructive Variant
Loading preview...
Textarea · Textarea with helper text
Loading preview...
Textarea · Textarea with hint
Loading preview...
Textarea · Textarea with colored border and ring
Loading preview...
Textarea · Textarea with error
Loading preview...
Textarea · Textarea with gray background
Loading preview...
Textarea · Shorter textarea
Loading preview...
Textarea · Disabled textarea
Loading preview...
Textarea · Textarea with left button
Loading preview...
Textarea · Textarea with right button
Loading preview...
Textarea · Textarea with button
Loading preview...
Textarea · Textarea with overlapping label
Loading preview...
Textarea · Destructive Variant
Loading preview...
Textarea · Textarea with inset label
Loading preview...
Textarea · Textarea with characters left
Loading preview...
Textarea · Textarea with no resize
Loading preview...
Textarea · Read-only textarea
Loading preview...
Textarea · Autogrowing textarea
Loading preview...
Structured API
Component
textarea
Logic
none
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | none | State and interaction provider used by this component. |
| logic.machine | string | - | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | - | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | - | The placeholder text. |
| disabled | boolean | false | Whether the textarea is disabled. |
| value | string | - | The controlled value. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onValueChange | event | - | Callback called when value changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | Default slot content rendered inside the component root. |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The textarea element itself |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Textarea · Simple textarea
- Textarea · Destructive Variant
- Textarea · Textarea with helper text
- Textarea · Textarea with hint
- Textarea · Textarea with colored border and ring
- Textarea · Textarea with error
- Textarea · Textarea with gray background
- Textarea · Shorter textarea
- Textarea · Disabled textarea
- Textarea · Textarea with left button
- Textarea · Textarea with right button
- Textarea · Textarea with button
- Textarea · Textarea with overlapping label
- Textarea · Destructive Variant
- Textarea · Textarea with inset label
- Textarea · Textarea with characters left
- Textarea · Textarea with no resize
- Textarea · Read-only textarea
- Textarea · Autogrowing textarea
- API Reference
Textarea
Installation
npx shadcn@latest add https://ui.timkit.cn/r/textarea.json
Usage
import { Textarea } from "@/components/ui/textarea"
Examples
Textarea · Simple textarea
Loading preview...
Textarea · Destructive Variant
Loading preview...
Textarea · Textarea with helper text
Loading preview...
Textarea · Textarea with hint
Loading preview...
Textarea · Textarea with colored border and ring
Loading preview...
Textarea · Textarea with error
Loading preview...
Textarea · Textarea with gray background
Loading preview...
Textarea · Shorter textarea
Loading preview...
Textarea · Disabled textarea
Loading preview...
Textarea · Textarea with left button
Loading preview...
Textarea · Textarea with right button
Loading preview...
Textarea · Textarea with button
Loading preview...
Textarea · Textarea with overlapping label
Loading preview...
Textarea · Destructive Variant
Loading preview...
Textarea · Textarea with inset label
Loading preview...
Textarea · Textarea with characters left
Loading preview...
Textarea · Textarea with no resize
Loading preview...
Textarea · Read-only textarea
Loading preview...
Textarea · Autogrowing textarea
Loading preview...
Structured API
Component
textarea
Logic
none
Runtime Frameworks
ReactVueWeappHTML
Supported Platforms
WebWeChat Mini Program
Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
| logic.provider* | enum (zag | native | none) | none | State and interaction provider used by this component. |
| logic.machine | string | - | Underlying state machine identifier when provider is zag. |
| platforms* | array | Web, WeChat Mini Program | Platforms officially supported by this schema. |
| frameworks* | array | React, Vue, Weapp, HTML | Framework demos/code currently available in registry files. |
| dependencies | array | @timui/core | Runtime package dependencies required by this registry item. |
| optionalPeerDependencies | array | - | Optional peer dependencies used by this registry item. |
| registryDependencies | array | - | Dependent Timkit registry components/hook entries. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | - | The placeholder text. |
| disabled | boolean | false | Whether the textarea is disabled. |
| value | string | - | The controlled value. |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
| onValueChange | event | - | Callback called when value changes. |
Slots
| Prop | Type | Default | Description |
|---|---|---|---|
| default | slot | - | Default slot content rendered inside the component root. |
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| root* | root | - | The textarea element itself |
This API reference is generated from `/packages/core` component schemas to keep React/Vue/Weapp docs consistent.
Extended notes are not available for this component yet.
On This Page
- Installation
- Usage
- Examples
- Textarea · Simple textarea
- Textarea · Destructive Variant
- Textarea · Textarea with helper text
- Textarea · Textarea with hint
- Textarea · Textarea with colored border and ring
- Textarea · Textarea with error
- Textarea · Textarea with gray background
- Textarea · Shorter textarea
- Textarea · Disabled textarea
- Textarea · Textarea with left button
- Textarea · Textarea with right button
- Textarea · Textarea with button
- Textarea · Textarea with overlapping label
- Textarea · Destructive Variant
- Textarea · Textarea with inset label
- Textarea · Textarea with characters left
- Textarea · Textarea with no resize
- Textarea · Read-only textarea
- Textarea · Autogrowing textarea
- API Reference