--- title: Segmented Control description: Segmented Control switches between two to five views of one content or setting. Appetite UI Figma component: two sizes, tokens and iOS notes. group: Components source: https://www.appetiteui.com/docs/segmented-control dateModified: 2026-10-03 --- # Segmented Control Updated: October 3, 2026. Segmented Control switches between two to five views of the same content. ## Preview A mutually exclusive switch between views of the same content, applied the moment it is picked. Default size, three segments. The specimen is live, so pick one. Specimen: Segmented Control, Size Default, Tabs 3. track 340 x 48, padding 4, segment 110.67 x 40, radius full. The component exposes two properties, Size and Tabs. Every label reads Option because the label lives on a nested selector instance, and so do Active, Icon and Icon Swap, so a real control means reaching into each segment one at a time. Every variant sets Icon off. Switching moves the pill with motion/duration/base, 200 ms on the standard curve. ## How many segments can a Segmented Control hold? Two to five segments in the same 340 track. The 4px padding never moves, so segments split the remaining 332 evenly; only their width changes. Five is the cap, the same as Tabs. Specimen: Tabs 2, 3, 4, 5. 332 split evenly, at Size Default with Icon off. The track is pinned to 340 and each segment fills an equal share of the 332 left over: 166, 110.67, 83 and 66.4 wide. A segment spends 12 of padding on each side, and 6 once there are five, so five leave 54.4 for the label. ## How tall is a Segmented Control? Two heights, 48 and 38. The segment carries the change: 40 tall at padding 8 and 12 becomes 30 at 6 and 12, label 16/24 to 14/20 at letter spacing .1. Track padding, gap and radius hold. Specimen: Size Default, Size Small. track 48 / 38, segment 40 / 30, label 16 / 14. The track gets 48 and 38 once a 40 or a 30 segment sits inside 4 of padding. The icon, when you switch it on, is 16 square in both sizes, so at Small it takes a bigger share of a shorter segment. ## Which states does Segmented Control have? One state, held by exactly one segment. Active takes the bg/white-0 fill, dropShadow/xs and text/strong-950. Inactive carries no fill and drops to text/sub-700. There is no Pressed or Disabled variant in the file. Specimen: Active True, Active False. fill bg/white-0 with dropShadow/xs, then no fill. Set Active on exactly one segment. It lives on the nested selector, so a three segment variant carries three independent booleans and nothing stops all three being on at once. Keep that rule in your code. ## Properties Two variant axes on the published component. The rest sit on the selector inside it, a building block not meant for direct use. | Property | Type | Default | | --- | --- | --- | | `Size` | Default \| Small | Default | | `Tabs` | 2 \| 3 \| 4 \| 5 | 2 | | `Active` | True \| False, on the selector | False | | `Icon` | Boolean, on the selector, set false in every variant | true | | `Icon Swap` | Instance swap, on the selector | circle | Segmented Control ships 8 variants, two sizes across four tab counts. The selector ships four, Active across Size. ## Tokens Every value the component reads, resolved through its aliases to the primitive underneath. | Token | Light | Dark | Applied to | | --- | --- | --- | --- | | `bg/weak-50` | #F4F5F5 | #242427 | The track | | `bg/white-0` | #FFFFFF | #0E0E0F | The active segment | | `text/strong-950` | #0E0E0F | #FFFFFF | The active label | | `text/sub-700` | #48484A | #C7C7CC | Every other label | | `fg/soft-500` | #8E8E93 | #AEAEB2 | The icon, in both states | Radius is `dimensions/radius/full` on both track and segment. The active fill carries `dropShadow/xs`: 0 1px 2px at 4 percent over 0 4px 4px at 1 percent. Accordion and Card reach for the same pair. In dark, bg/weak-50 lands on #242427 while the active segment lands on #0E0E0F, so the selected pill is darker than the groove holding it. ## How does Segmented Control differ on iOS and Material 3? iOS has its own Segmented Control, wider and in two other heights. The Material 3 page of the file has no segmented control. Appetite UI Segmented Control is one component with a 340 wide track. | Appetite UI | iOS counterpart | Material 3 counterpart | What differs | | --- | --- | --- | --- | | Segmented Control | iOS / Segmented Control, 370 wide, Size Small at 32 high and Large at 50 high by Segments 2 to 5 | None in the file. Material 3 has a segmented button of its own, which the file does not include. | Appetite UI is 340 wide at 48 and 38 high with a radius of full on both track and pill. The counts match: two to five segments. | The minimum touch target is 44 pt on iOS and 48 dp on Material 3, set by `platform/min-touch-target` in the Platform collection. Default clears 44 pt. Small is 38 high, so give it 44 pt of hit area in code. ## When should I use Segmented Control instead of Tabs? Use Segmented Control when the switch belongs to a setting and Tabs when it belongs to the content below it. - Do: Keep the set short and the labels to one word. Segments take an equal share, so the longest label decides the room every other segment gets. - Avoid: Do not push five long labels through a Default track. Each segment gets 66.4 and spends 12 on padding, so a word wider than 54 clips. Go Small, drop the icon, or use Tabs. Both cap at five segments. Segmented Control is a pill in a groove and applies on pick, and Tabs is an underline with no track. They do the same job in opposite chrome, so pick one per screen. ## In the screens and the glossary - Glossary: [Segmented control](https://www.appetiteui.com/academy/glossary/segmented-control)