Field experimental
Ark UI Field 기반 wrapper입니다. Label, Input, Textarea, Select, HelperText, ErrorText anatomy를 제공합니다.
Preview
표시될 이름을 입력하세요.
올바른 이메일 형식을 입력하세요.
한 문장으로 간단히 작성하세요.
<script lang="ts">
import * as Field from '@odbd/svelte/field'
import * as Select from '@odbd/svelte/select'
import { createListCollection } from '@odbd/svelte/select'
const roles = createListCollection({
items: [
{ label: '디자이너', value: 'designer' },
{ label: '엔지니어', value: 'engineer' },
{ label: 'PM', value: 'pm' },
],
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
})
</script>
<div class="field-demo">
<Field.Root required>
<Field.Label>이름 <Field.RequiredIndicator /></Field.Label>
<Field.Input placeholder="이름을 입력하세요" />
<Field.HelperText>표시될 이름을 입력하세요.</Field.HelperText>
</Field.Root>
<Field.Root invalid>
<Field.Label>이메일</Field.Label>
<Field.Input placeholder="[email protected]" />
<Field.ErrorText>올바른 이메일 형식을 입력하세요.</Field.ErrorText>
</Field.Root>
<!-- Field 안에서도 native select 대신 디자인 시스템 Select를 그대로 결합한다 -->
<Field.Root>
<Select.Root collection={roles}>
<Select.Label>역할</Select.Label>
<Select.Control>
<Select.Trigger>
<Select.ValueText placeholder="역할을 선택하세요" />
<Select.Indicator>▾</Select.Indicator>
</Select.Trigger>
</Select.Control>
<Select.Positioner>
<Select.Content>
{#each roles.items as item}
<Select.Item {item}>
<Select.ItemText>{item.label}</Select.ItemText>
<Select.ItemIndicator>✓</Select.ItemIndicator>
</Select.Item>
{/each}
</Select.Content>
</Select.Positioner>
<Select.HiddenSelect />
</Select.Root>
<Field.HelperText>팀에서 맡은 역할을 선택하세요.</Field.HelperText>
</Field.Root>
<Field.Root>
<Field.Label>소개</Field.Label>
<Field.Textarea rows={3} placeholder="자신을 소개하세요" />
<Field.HelperText>한 문장으로 간단히 작성하세요.</Field.HelperText>
</Field.Root>
</div>
<style>
.field-demo {
display: flex;
width: 100%;
max-width: 24rem;
flex-direction: column;
gap: var(--odbd-space-5);
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Field from '@odbd/svelte/field' import { Field } from '@odbd/react/field'