Segmented
An input with multiple options of which only 1 can be selected at a time.
Importing
1
import { Segmented } from '@infinityfx/fluid';Usage
With tooltips
API reference
Segmented Props
round?
boolean
false
size?
'sml' | 'med' | 'lrg'
'med'
variant?
'default' | 'neutral' | 'minimal'
'default'
options
{ label: React.ReactNode; value: string | number; disabled?: boolean; tooltip?: string; }[]
Required
The list of options to display.
uniform?
boolean
false
Makes all entries equal size regardless of their content.
vertical?
boolean
false
Stacks the options vertically.
value?
string | number
Controlled selected value.
defaultValue?
string | number
Default selected value for uncontrolled usage.
onChange?
(value: string | number) => void
error?
any
Marks the segmented control as invalid when truthy.