Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

Tapping on a Checkbox will toggled it between on or off.

PropTypeNotes
valueboolean
disabledboolean
validationfunction
onValueChangefunction

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

Examples

import { Override } from 'framer'

export function CheckboxExample(): Override {
	return {
		onValueChange: (value) => console.log('Value: ' + value),
	}
}
import * as React from 'react'
import { Frame } from 'framer'
// @ts-ignore
import { Checkbox } from '@framer/steveruizok.education/code'

export const CheckboxExample = (props) => {
	const handleValueChange = (value, valid) => {
		console.log(`Checked: ${value}`)
	}

	return (
		<Frame size="100%" background="none">
			<Checkbox center onValueChange={handleValueChange} />
		</Frame>
	)
}