Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

Tapping on a Radio will turn it on. Radio inputs are normally used as a group in order to capture a mutually-exclusive choice, as is done in the RadioGroup component.

PropTypeNotes
valueboolean
disabledboolean
validationfunction
onValueChangefunction

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

Examples

// Override

import { Override } from 'framer'

export function RadioExample(): Override {
	return {
		onValueChange: (value) => console.log('Value: ' + value),
	}
}
// Code Component

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

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

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