Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

A Segment is a group of options, presented as buttons. Only one option may be selected at once.

PropTypeNotes
optionsstring[]The input's options.
valuestringThe input's selected option.
disabledboolean
validationfunction
onValueChangefunctionThe callback to fire when turned on or off.

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

Examples

// Override

import { Override } from 'framer'

export function SegmentExample(): 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 { Segment } from '@framer/steveruizok.education/code'

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

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