Input

폼 입력 필드 또는 입력 필드처럼 보이는 컴포넌트를 표시합니다.

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Input type="email" placeholder="이메일" class="max-w-xs" />

설치

pnpm dlx shadcn-svelte@latest add input

npx shadcn-svelte@latest add input

npx shadcn-svelte@latest add input

bun x shadcn-svelte@latest add input

다음 코드를 프로젝트에 복사하여 붙여넣으세요.

import Root from "./input.svelte";

export {
  Root,
  //
  Root as Input,
};

사용법

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

<Input />

예제

기본

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Input type="email" placeholder="이메일" class="max-w-xs" />

파일

사진

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<div class="grid w-full max-w-sm items-center gap-1.5">
  <Label for="picture">사진</Label>
  <Input id="picture" type="file" />
</div>

비활성화

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<Input disabled type="email" placeholder="이메일" class="max-w-sm" />

라벨과 함께

이메일

<script lang="ts">
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
 
  const id = $props.id();
</script>
 
<div class="flex w-full max-w-sm flex-col gap-1.5">
  <Label for="email-{id}">이메일</Label>
  <Input type="email" id="email-{id}" placeholder="이메일" />
</div>

버튼과 함께

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
</script>
 
<div class="flex w-full max-w-sm items-center gap-2">
  <Input type="email" placeholder="이메일" />
  <Button type="submit" variant="outline">구독</Button>
</div>

Input OTP Item