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
Root of the Field compound component, which connects a form control with its label, description, and validation messages. Renders a <div> element.
| 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 for the field's control, linked to it for assistive technologies. Renders a <label> element.
| 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
Helper text that explains the field, announced to assistive technologies with the control. Renders a <p> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Field.Error
Error message shown when the field fails validation. Use match to show it only for a specific validity state. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
match? | - | booleanbadInputcustomErrorpatternMismatchrangeOverflowrangeUnderflowstepMismatchtooLongtooShorttypeMismatchvalueMissing |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Field.Success
Success message shown when the field passes validation. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
match? | valid | booleanvalid |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Field.Item
Groups a single checkbox or radio with its own label and description inside a checkbox group or radio group field. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
render? | - | ReactElementfunction |