Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
Textarea
Нативный элемент textarea.
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea placeholder="Введите сообщение" />;
}
Установка
pnpm dlx shadcn@latest add @oracul/textarea
Использование
import { Textarea } from "@/components/ui/textarea"<Textarea />Интеграция с Field
В отличие от встроенных элементов управления формой Base UI, Base UI не предоставляет нативный примитив Textarea. Этот компонент внутренне оборачивает нативный элемент <textarea> в Field.Control, поэтому он интегрируется с Field «из коробки» — оборачивать его в FieldControl вручную не нужно.
<Field>
<FieldLabel>Bio</FieldLabel>
<Textarea placeholder="Расскажите о себе…" />
<FieldDescription>Напишите краткую биографию.</FieldDescription>
<FieldError>Это поле обязательно для заполнения.</FieldError>
</Field>Справочник API
Textarea
Стилизованный нативный элемент textarea с настраиваемыми вариантами размера.
| Свойство | Тип | По умолчанию | Описание |
|---|---|---|---|
size | "sm" | "default" | "lg" | number | "default" | Управляет внутренними отступами textarea. Числовые значения передаются в нативный атрибут rows |
unstyled | boolean | false | Если true, убирает все стили по умолчанию |
Примеры
Маленький размер
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea placeholder="Введите сообщение" size="sm" />;
}
Большой размер
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea placeholder="Введите сообщение" size="lg" />;
}
Отключённый
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea disabled placeholder="Здесь нельзя писать" />;
}
С меткой
import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
const id = useId();
return (
<div className="flex flex-col items-start gap-2">
<Label htmlFor={id}>Сообщение</Label>
<Textarea id={id} placeholder="Введите сообщение" />
</div>
);
}
Интеграция с формой
"use client";
import type { FormEvent } from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
const [loading, setLoading] = useState(false);
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
alert(`Сообщение: ${formData.get("message") || ""}`);
};
return (
<Form className="flex w-full max-w-64 flex-col gap-4" onSubmit={onSubmit}>
<Field>
<FieldLabel>Сообщение</FieldLabel>
<Textarea name="message" placeholder="Введите сообщение" required />
<FieldError>Это поле обязательно для заполнения.</FieldError>
</Field>
<Button loading={loading} type="submit">
Отправить
</Button>
</Form>
);
}