Field - Kitchen Sink

기본 사용법

Field 컴포넌트는 label, content, description 슬롯을 사용하여 폼 필드를 구성합니다.

이메일 주소 이메일 주소를 입력해주세요

비밀번호 8자 이상 입력해주세요

          <Field> <FieldLabel label="이메일 주소" htmlFor="email" /> <input
          id="email" type="email" /> <FieldDescription desc="이메일 주소를 입력해주세요"
          slot="description" /> </Field>
        

Orientation

horizontal(기본값) 또는 vertical 방향을 설정할 수 있습니다.

수평 레이아웃

수직 레이아웃

          <Field orientation="horizontal"> <FieldLabel label="수평 레이아웃" />
          <input /> </Field> <Field orientation="vertical"> <FieldLabel
          label="수직 레이아웃" /> <input /> </Field>
        

실제 사용 예시

Checkbox와 함께 사용하는 예시입니다.

약관 동의

이용약관에 동의합니다

서비스 이용을 위해 약관에 동의해주세요

          <Field> <FieldLabel label="약관 동의" /> <div > <Checkbox
          text="이용약관에 동의합니다" /> </div> <FieldDescription desc="서비스 이용을
          위해 약관에 동의해주세요" slot="description" /> </Field>
        

Field Props

Prop	Type	Default	Description
`orientation`	'horizontal' \| 'vertical'	'horizontal'	레이아웃 방향
`class`	string	-	추가 CSS 클래스

FieldLabel Props

Prop	Type	Default	Description
`label`	string	-	라벨 텍스트 (slot과 함께 사용 가능)
`htmlFor`	string	-	연결할 input 요소의 id
`size`	'default' \| 'small'	'default'	라벨 크기
`class`	string	-	추가 CSS 클래스

FieldDescription Props

Prop	Type	Default	Description
`desc`	string	-	설명 텍스트
`size`	'lg' \| 'default' \| 'sm' \| 'xs'	'default'	텍스트 크기
`weight`	'bold' \| 'medium' \| 'regular'	'regular'	텍스트 굵기
`class`	string	-	추가 CSS 클래스