FieldGroup

FieldGroup is a component that groups form fields together. Additionally, it provides a common label, helper text, and validation messages for all fields in the group.

Examples

examples

import { Checkbox, FieldGroup } from "@seduo/design-system";
...
<FieldGroup label="Label">
    <Checkbox id="checkbox1" label="Checkbox Label" name="checkboxDefault" isChecked />
    <Checkbox id="checkbox2" label="Checkbox Label" name="checkboxDefault" />
</FieldGroup>

<FieldGroup id="example-field-group" label="Label">
    <Checkbox id="checkbox1" label="Checkbox Label" name="checkboxDefault" isChecked />
    <Checkbox id="checkbox2" label="Checkbox Label" name="checkboxDefault" />
</FieldGroup>

API

Name	Type	Default	Required	Description
`form`	`string`	`null`	no	Parent form ID
`helperText`	`string`	`null`	no	Custom helper text
`id`	`string`	-	yes	Group and label identification
`isDisabled`	`bool`	`false`	no	If true, the group is disabled
`isFluid`	`bool`	-	no	If true, the element spans to the full width of its parentd
`isLabelHidden`	`bool`	`false`	no	If true, label is hidden
`isRequired`	`bool`	`false`	no	If true, the group is marked as required
`label`	`string`	-	yes	Label text
`name`	`string`	`null`	no	Group name
`UNSAFE_className`	`string`	-	no	Wrapper custom class name
`UNSAFE_style`	`CSSProperties`	-	no	Wrapper custom style
`validationState`	Validation dictionary	`null`	no	Type of validation state
`validationText`	[`string` \| `string[]`]	`null`	no	Validation text

On this page