Segmented Control

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

<SegmentedControl.Root defaultValue="inbox">
	<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
	<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
	<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>

API Reference

This component inherits props and functionality from the Toggle Group primitive. It supports common margin props.

Root

Contains the items of the control.

Prop	Type	Default
`disabled`	`boolean`	`false`
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`variant`	`"surface" \| "classic"`	`"surface"`
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	—

Item

Represents individual values of the control.

Examples

Size

Use the size prop to control the size of the control.

<Flex align="start" direction="column" gap="4">
	<SegmentedControl.Root defaultValue="inbox" size="1">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>

	<SegmentedControl.Root defaultValue="inbox" size="2">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>

	<SegmentedControl.Root defaultValue="inbox" size="3">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>
</Flex>

Variant

Use the variant prop to control the visual style of the control.

<Flex align="start" direction="column" gap="4">
	<SegmentedControl.Root defaultValue="inbox" variant="surface">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>

	<SegmentedControl.Root defaultValue="inbox" variant="classic">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>
</Flex>

Radius

Use the radius prop to assign a specific radius value.

<Flex align="start" direction="column" gap="4">
	<SegmentedControl.Root defaultValue="inbox" radius="none">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>

	<SegmentedControl.Root defaultValue="inbox" radius="small">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>

	<SegmentedControl.Root defaultValue="inbox" radius="medium">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>

	<SegmentedControl.Root defaultValue="inbox" radius="large">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>

	<SegmentedControl.Root defaultValue="inbox" radius="full">
		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
	</SegmentedControl.Root>
</Flex>