Segmented
Display multiple options and allow users to select a single option.
Basic Usage
Set v-model to the option value is selected.
export function SegmentedBasic() { const [value, setValue] = useState<string>("Mon"); return ( <div style={stack}> <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={DAY_OPTIONS} size="large" /> <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={DAY_OPTIONS} /> <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={DAY_OPTIONS} size="small" /> </div> ); } Direction Usage 2.8.7
Set vertical to change direction.
export function SegmentedCustomDirection() { const [value, setValue] = useState<string>("Apple"); const [direction, setDirection] = useState<"horizontal" | "vertical">("horizontal"); const [size, setSize] = useState<ComponentSize>("default"); const options = FRUIT_OPTIONS.map((item) => item.value === "Watermelon" ? { ...item, disabled: true } : item, ); return ( <div> <ElSegmented value={size} onChange={(v) => setSize(v as ComponentSize)} options={["large", "default", "small"]} style={{ marginBottom: 16 }} /> <br /> <ElSegmented value={direction} onChange={(v) => setDirection(v as "horizontal" | "vertical")} options={[ { label: "Horizontal", value: "horizontal" }, { label: "Vertical", value: "vertical" }, ]} style={{ marginBottom: 16 }} /> <br /> <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} direction={direction} size={size} > {(item) => { const option = item as { label: string; icon: string }; return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", padding: direction === "horizontal" ? "0.5rem" : undefined, }} > <ElIcon size={20}> <FruitIcon name={option.icon} /> </ElIcon> <div>{option.label}</div> </div> ); }} </ElSegmented> </div> ); } Disabled
Set disabled of segmented or option to true to disable it.
export function SegmentedDisabled() { const [value, setValue] = useState<string>("Mon"); const options = [ { label: "Mon", value: "Mon", disabled: true }, { label: "Tue", value: "Tue" }, { label: "Wed", value: "Wed", disabled: true }, { label: "Thu", value: "Thu" }, { label: "Fri", value: "Fri", disabled: true }, { label: "Sat", value: "Sat" }, { label: "Sun", value: "Sun" }, ]; return ( <div style={stack}> <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} disabled /> <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} /> </div> ); } Aliases for custom options 2.9.8
When your options format is different from the default format, you can customize the alias of the options through the props attribute
export function SegmentedAliases() { const [value, setValue] = useState<string>("Mon"); const optionProps = { label: "myLabel", value: "myValue", disabled: "myDisabled" }; const options = [ { myLabel: "Mon", myValue: "Mon", myDisabled: true }, { myLabel: "Tue", myValue: "Tue" }, { myLabel: "Wed", myValue: "Wed", myDisabled: true }, { myLabel: "Thu", myValue: "Thu" }, { myLabel: "Fri", myValue: "Fri", myDisabled: true }, { myLabel: "Sat", myValue: "Sat" }, { myLabel: "Sun", myValue: "Sun" }, ]; return ( <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} optionProps={optionProps} /> ); } Block
Set block to true to fit the width of parent element.
export function SegmentedBlock() { const [value, setValue] = useState<string>("Mon"); const options = [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday long long long long long long long", ]; return <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} block />; } Custom Content
Set default slot to render custom content.
export function SegmentedCustomContent() { const [value, setValue] = useState<string>("Apple"); return ( <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={FRUIT_OPTIONS}> {(item) => { const option = item as { label: string; icon: string }; return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", padding: "0.5rem", }} > <ElIcon size={20}> <FruitIcon name={option.icon} /> </ElIcon> <div>{option.label}</div> </div> ); }} </ElSegmented> ); } Custom Style
Set custom styles using CSS variables.
export function SegmentedCustomStyle() { const [value, setValue] = useState<string>("Delicacy"); const options = ["Delicacy", "Desserts&Drinks", "Fresh foods", "Supermarket"]; const customVars = { "--el-segmented-item-selected-color": "var(--el-text-color-primary)", "--el-segmented-item-selected-bg-color": "#ffd100", "--el-border-radius-base": "16px", } as CSSProperties; return ( <ElSegmented value={value} onChange={(v) => setValue(v as string)} options={options} style={customVars} /> ); } API
Attributes
Name Description Type Default model-value / v-model binding value stringnumberboolean— options data of the options array[] props 2.9.8 configuration options, see the following table object— size size of component enum'' block fit width of parent content booleanfalse disabled whether segmented is disabled booleanfalse validate-event whether to trigger form validation booleantrue name native name attribute string— id native id attribute string— aria-label a11y native aria-label attribute string— direction 2.8.7 display direction enumhorizontal
props
Attribute Description Type Default value specify which key of node object is used as the node's value stringvalue label specify which key of node object is used as the node's label stringlabel disabled specify which key of node object is used as the node's disabled stringdisabled
Events
Name Description Type change triggers when the selected value changes, the param is current selected value Function
Slots
Name Description Type default option renderer object
Type Declarations
Show declarations
type Option = Record < string , any > | string | number | boolean
