Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A RadioGroup takes a set of options and turns them into a set of RowItems, each of which displays the option together with a Radio. The RadioGroup’s value is the currently selected option.

PropTypeNotes
optionsstring[]The group’s options.
valuestringThe currently selected option, if any.
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 RadioGroupExample(): Override {
	return {
		options: ['Paris', 'New York', 'London', 'Hong Kong'],
		onValueChange: (value) => console.log(value),
	}
}
// Code component

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

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

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