Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A CheckboxGroup takes a set of options and turns them into a set of RowItems, each of which displays the option together with a Checkbox. The CheckboxGroup’s value is an array containing all checked options.

PropTypeNotes
optionsstring[]The input's options.
valuestringThe input's selected option.
requiredbooleanWhether to be invalid when no option is selected.
disabledboolean
validationfunction
onValueChangefunction

See the Inputs section for more on how inputs work in Learn.

Examples

// Overrides
import { Override } from 'framer'

export function CheckboxGroupExample(): Override {
	return {
		options: ['Paris', 'New York', 'London', 'Hong Kong'],
		onValueChange: (value) => console.log(value),
	}
}
// Code Overrides
import * as React from 'react'
import { Frame } from 'framer'
// @ts-ignore
import { CheckboxGroup } from '@framer/steveruizok.education/code'

export const CheckboxGroupExample = (props) => {
	const handleValueChange = (value, valid) => {
		console.log(value)
	}

	return (
		<Frame size="100%" background="none">
			<CheckboxGroup
				center
				options={['Paris', 'New York', 'London', 'Hong Kong']}
				onValueChange={handleValueChange}
			/>
		</Frame>
	)
}