Textareastandard

여러 줄 글을 입력받는 입력 칸(textarea)입니다. shadcn base-nova 의 stock 아이템으로, 스타일을 입힌 `<textarea>` 입니다. 한 줄 입력에는 `input` 을 씁니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/textarea

Default

Basic

Invalid

With Label

With Description

Disabled

textarea-example.tsx

import {  Example,  ExampleWrapper,} from "@/components/example"import {  Field,  FieldDescription,  FieldLabel,} from "@/components/ui/field"import { Textarea } from "@/components/ui/textarea"
export default function TextareaExample() {  return (    <ExampleWrapper>      <TextareaBasic />      <TextareaInvalid />      <TextareaWithLabel />      <TextareaWithDescription />      <TextareaDisabled />    </ExampleWrapper>  )}
function TextareaBasic() {  return (    <Example title="Basic">      <Textarea placeholder="Type your message here." />    </Example>  )}
function TextareaInvalid() {  return (    <Example title="Invalid">      <Textarea placeholder="Type your message here." aria-invalid="true" />    </Example>  )}
function TextareaWithLabel() {  return (    <Example title="With Label">      <Field>        <FieldLabel htmlFor="textarea-demo-message">Message</FieldLabel>        <Textarea          id="textarea-demo-message"          placeholder="Type your message here."          rows={6}        />      </Field>    </Example>  )}
function TextareaWithDescription() {  return (    <Example title="With Description">      <Field>        <FieldLabel htmlFor="textarea-demo-message-2">Message</FieldLabel>        <Textarea          id="textarea-demo-message-2"          placeholder="Type your message here."          rows={6}        />        <FieldDescription>          Type your message and press enter to send.        </FieldDescription>      </Field>    </Example>  )}
function TextareaDisabled() {  return (    <Example title="Disabled">      <Field>        <FieldLabel htmlFor="textarea-demo-disabled">Message</FieldLabel>        <Textarea          id="textarea-demo-disabled"          placeholder="Type your message here."          disabled        />      </Field>    </Example>  )}