Agriculture Design System
Beta
Design System for the Export Service

Switch

A Switch allows a user to immediately toggle interface settings.

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

Usage

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

For example:

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

Props

Switch Props
PropTypeDescription
checkedboolean
The current checked state.
labelstring
The associated label for the switch.
onChange(newValue: boolean) => void
Handle change events.
aria-controls?string
size?SwitchSizeDefault: "md"
The size of the switch.

Source

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