You are viewing a PR preview for PR #1506

Agriculture Design System
Beta
Design System for the Export Service

Control group

Control groups allow related checkboxes and radios to be grouped together.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/control-group';

Usage

Control group components can be imported via the control-group entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/control-group';

Props

ControlGroup Props
PropTypeDescription
block?booleanDefault: "false"If true, children will be stacked vertically.
children?ReactNode
hideOptionalLabel?booleanIf true, "(optional)" will never be appended to the label.
hint?stringProvides extra information about the field.
id?stringDefines an identifier (ID) which must be unique.
invalid?booleanDefault: "false"If true, the invalid state will be rendered.
label?stringDescribes the purpose of the field.
message?stringMessage to show when the field is invalid.
required?booleanDefault: "false"If false, "(optional)" will be appended to the label.

Source

You can view the full source code for this package on Github.