Segment Control - Skeleton

import React, { useState } from 'react';
import { Segment } from '@skeletonlabs/skeleton-react';
import { AlignLeft as IconLeft, AlignCenter as IconCenter, AlignRight as IconRight, AlignJustify as IconJustify } from 'lucide-react';

export const Page: React.FC = () => {
	const [align, setAlign] = useState('left');

	return (
		<Segment value={align} name="align" onChange={setAlign}>
			<Segment.Item id="left" value="left">
				<IconLeft />
			</Segment.Item>
			<Segment.Item id="center" value="center">
				<IconCenter />
			</Segment.Item>
			<Segment.Item id="right" value="right">
				<IconRight />
			</Segment.Item>
			<Segment.Item id="justify" value="justify">
				<IconJustify />
			</Segment.Item>
		</Segment>
	);
};

This component wraps native radio inputs, which enables it to operate as as a form control.

Disabled

Set disabled to any item to disable focus and interaction.

import React, { useState } from 'react';
import { Segment } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
	const [size, setSize] = useState('sm');

	return (
		<Segment value={size} name="size" onChange={setSize}>
			<Segment.Item id="sm" value="sm">
				sm
			</Segment.Item>
			<Segment.Item id="md" value="md">
				md
			</Segment.Item>
			<Segment.Item id="lg" value="lg" disabled>
				lg
			</Segment.Item>
		</Segment>
	);
};

Vertical

Set flexDirection to enable a vertical layout. This can be controlled with responsive breakpoints.

import React, { useState } from 'react';
import { Segment } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
	const [size, setSize] = useState('sm');

	return (
		<Segment value={size} name="size" flexDirection="flex-col" onChange={setSize}>
			<Segment.Item id="sm" value="sm">
				Small
			</Segment.Item>
			<Segment.Item id="md" value="md">
				Medium
			</Segment.Item>
			<Segment.Item id="lg" value="lg" disabled>
				Large
			</Segment.Item>
		</Segment>
	);
};

Alternative

Consider using a Button Group if you need direct control over the markup and styling.

API Reference

Segment

Property	Type	Description
`value`	string	Set the group value, which determines selection state.
`name` *	string	Provide the shared input name.
`base`	string	Sets base classes.
`background`	string	Set background classes.
`border`	string	Set border classes.
`flexDirection`	string	Set flex direction classes.
`gap`	string	Set gap classes.
`padding`	string	Set padding classes.
`rounded`	string	Set rounded classes.
`width`	string	Set width classes.
`classes`	string	Provide arbitrary CSS classes.
`onChange`	object	Triggers when the value state is changed.
`children`	React.ReactNode	-

SegmentItems

Property	Type	Description
`id` *	string	Provide a unique ID.
`value` *	string	Provide the unique segment value.
`title`	string	Provide a hover title attribute.
`disabled`	boolean	Set the disabled state.
`base`	string	Sets base classes.
`active`	string	Sets active state classes.
`hover`	string	Sets hover state classes.
`classes`	string	Provide arbitrary CSS classes.
`labelBase`	string	Sets base classes for the label element.
`labelClasses`	string	Provide arbitrary CSS classes for the label element.
`onclick`	object	Triggers on items click event.
`children`	React.ReactNode	-