Guide
Why
Getting Started
API
Button
FramerPlugin
FramerPluginProvider
Icon
ListControls
NumberControls
SegmentedControls
Separator
Spinner
TextControls
useAutoSizer
useDebounce
useDebounceValue
useSelection
useStore
useTheme
asNumberOr
capitalizeWords
Component
A component that renders a set of selectable items with an indicator for the selected item.
// Render segmented controls with default items <SegmentedControls title="Choose an option" onChange={handleSegmentChange} />
// Render segmented controls with custom items const items = [ { value: 'option1', label: 'Option 1', icon: 'path/to/icon1.svg' }, { value: 'option2', label: 'Option 2', icon: 'path/to/icon2.svg' }, ]; <SegmentedControls items={items} value="option1" onChange={handleSegmentChange} />
defaultValue?
The default value of the segmented controls.
type
Value
disabled?
Whether the segmented controls are disabled.
boolean
items?
The list of selectable items.
SegmentedControlItem<Value>[]
default value
[{ value: true, label: 'Yes' }, { value: false, label: 'No' }]
onChange?
The callback function that is triggered when the value changes.
(value: Value) => void
title?
The title of the segmented controls.
string
value?
The value of the segmented controls.
Value | null