Field
Field는 폼 요소들을 감싸는 컨테이너 컴포넌트로, 라벨, 설명, 에러 메시지, 성공 메시지 등을 제공합니다.Examples
With Description
Field에 대한 추가 설명을 표시합니다.
Error and Success
Field.Error와 Field.Success를 사용하여 유효성 검사 결과를 표시합니다.
Required
필수 Field와 선택 Field를 구분하여 표시합니다.
Disabled
disabled 속성을 사용하여 비활성화된 Field를 만들 수 있습니다.
With RadioGroup
RadioGroup과 Field를 함께 사용합니다. Field.Item을 사용하여 각 Radio 옵션을 라벨과 함께 그룹화할 수 있습니다.
With Form Elements
TextInput, Checkbox, Switch, Select 등 다양한 폼 요소와 함께 사용합니다.
Property
Validation
validationMode를 통해 유효성 검사 타이밍을 설정합니다. match prop으로 특정 에러 타입에 대한 메시지를 표시합니다.
Disabled
Field의 비활성화 상태를 설정합니다.
Props Table
Field.Root
폼 컨트롤을 레이블, 설명, 유효성 검사 메시지와 연결하는 Field 복합 컴포넌트의 루트. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
actionsRef? | - | React.RefObject<Field.Root.Actions | null> |
dirty? | - | boolean |
disabled? | false | boolean |
invalid? | - | boolean |
name? | - | string |
touched? | - | boolean |
validate? | - | function |
validationDebounceTime? | 0 | number |
validationMode? | onSubmit | onBluronChangeonSubmit |
render? | - | ReactElementfunction |
Field.Label
필드 컨트롤의 레이블. 보조기술이 인식하도록 컨트롤과 연결됩니다. <label> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
foreground? | secondary | hintnormalwhiteprimary-100primary-200primarysecondary-100secondary-200secondarysuccess-100success-200successwarning-100warning-200warningdanger-100danger-200dangerhint-100hint-200contrast-100contrast-200contrastprimary-strongsuccess-strongwarning-strongdanger-strongnormal-100normal-200inversestaticWhitestaticBlack |
typography? | body2 | body1display1display2display3display4heading1heading2heading3heading4heading5heading6subtitle1subtitle2body2body3body4code1code2 |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeLabel? | true | boolean |
render? | - | ReactElementfunction |
Field.Description
필드를 설명하는 도움말 텍스트. 컨트롤과 함께 보조기술에 전달됩니다. <p> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Field.Error
필드가 유효성 검사에 실패했을 때 표시되는 오류 메시지. 특정 유효성 상태에서만 표시하려면 match를 사용하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
match? | - | booleanbadInputcustomErrorpatternMismatchrangeOverflowrangeUnderflowstepMismatchtooLongtooShorttypeMismatchvalueMissing |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Field.Success
필드가 유효성 검사를 통과했을 때 표시되는 성공 메시지. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
match? | valid | booleanvalid |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Field.Item
체크박스 그룹 또는 라디오 그룹 필드 안에서 체크박스나 라디오 하나를 자신의 레이블, 설명과 묶습니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
render? | - | ReactElementfunction |