이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Textarea

Previous Next

폼 텍스트영역 또는 텍스트영역처럼 보이는 컴포넌트를 표시합니다.

<script lang="ts">
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
 
<Textarea placeholder="메시지를 입력하세요." />

설치

pnpm dlx shadcn-svelte@latest add textarea

사용법

<script lang="ts">
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
<Textarea />

예제

기본

<script lang="ts">
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
 
<Textarea placeholder="메시지를 입력하세요." />

비활성화

<script lang="ts">
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
 
<Textarea disabled placeholder="메시지를 입력하세요." />

라벨 포함

<script lang="ts">
  import { Label } from "$lib/components/ui/label/index.js";
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
 
<div class="grid w-full gap-1.5">
  <Label for="message">메시지</Label>
  <Textarea placeholder="메시지를 입력하세요." id="message" />
</div>

텍스트 포함

메시지가 지원팀에 전달됩니다.

<script lang="ts">
  import { Label } from "$lib/components/ui/label/index.js";
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
 
<div class="grid w-full gap-1.5">
  <Label for="message-2">메시지</Label>
  <Textarea placeholder="메시지를 입력하세요." id="message-2" />
  <p class="text-muted-foreground text-sm">메시지가 지원팀에 전달됩니다.</p>
</div>

버튼 포함

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import { Textarea } from "$lib/components/ui/textarea/index.js";
</script>
 
<div class="grid w-full gap-2">
  <Textarea placeholder="메시지를 입력하세요." />
  <Button>메시지 전송</Button>
</div>