Fieldset experimental

Ark UI Fieldset 기반 wrapper입니다. 관련 폼 컨트롤을 묶고 legend, helper text, error text anatomy를 제공합니다.

@ark-ui/svelte/fieldset Ark UI docs ↗

배송 정보

받는 사람

주소 주소는 배송에만 사용해요.

입력한 정보는 배송 안내에만 사용해요.

<script lang="ts">
  import * as Fieldset from '@odbd/svelte/fieldset'
  import * as Field from '@odbd/svelte/field'
</script>

<Fieldset.Root style="max-width: 22rem;">
  <Fieldset.Legend>배송 정보</Fieldset.Legend>

  <Field.Root>
    <Field.Label>받는 사람</Field.Label>
    <Field.Input placeholder="이름을 입력하세요" />
  </Field.Root>

  <Field.Root>
    <Field.Label>주소</Field.Label>
    <Field.Input placeholder="주소를 입력하세요" />
    <Field.HelperText>주소는 배송에만 사용해요.</Field.HelperText>
  </Field.Root>

  <Fieldset.HelperText>입력한 정보는 배송 안내에만 사용해요.</Fieldset.HelperText>
</Fieldset.Root>

Import

Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.

import * as Fieldset from '@odbd/svelte/fieldset'

import { Fieldset } from '@odbd/react/fieldset'