Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A Switch allows a user to toggle between two values: true and false.

PropTypeNotes
valuenumber
disabledboolean
validationfunction
onValueChangefunction

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

Examples

// Overrides

import { Override } from 'framer'

export function SwitchExample(): Override {
	return {
		value: true,
		disabled: false,
		validation: (value) => true,
		onValueChange: (value, valid) =>
			console.log('Value: ' + value, 'Valid' + valid),
	}
}
// Code component

import * as React from 'react'
import { Frame } from 'framer'
// @ts-ignore
import { Slider } from '@framer/steveruizok.education/code'

export const StepperExample = (props) => {

  const handleValueChange = (value, valid) =>
			console.log('Value: ' + value, 'Valid' + valid),
	}

	return (
		<Frame size="100%" background="none">
			<Slider
				value={true}
        disabled={false}
				validation={(value) => true}
				onValueChange={handleValueChange}
				center
			/>
		</Frame>
	)
}