Agriculture Design System
Beta
Design System for the Export Service

Checkbox

Checkboxes allow users to select one or more options from a list.

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

Usage

Checkbox components can be imported via the checkbox entrypoint in the @ag.ds-next/react package.

For example:

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

Props

Checkbox Props
PropTypeDescription
autoFocus?boolean
checked?boolean
children?ReactNode
disabled?boolean
id?string
indeterminate?boolean
Used to represent a group of checkboxes that has a mix of selected and unselected values.
invalid?boolean
If true, the invalid state will be rendered.
max?string | number
maxLength?number
min?string | number
minLength?number
name?string
onBlur?FocusEventHandler<HTMLInputElement>
onChange?ChangeEventHandler<HTMLInputElement>
pattern?string
ref?Ref<HTMLInputElement>
required?boolean
size?"md" | "sm"Default: "md"
The size of the input.
value?string | number | readonly string[]

Source

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