Segmented

The Segmented component allows for the organization of UI into separate sections, where each Segmented represents distinct content. The component offers customization for visual styles such as color, size, radius, and contrast.

Report Issue Github

Usage

Basic Segmenteds

Here's a basic setup with three Segmenteds:


<Segmented.Root defaultValue="Segmented1">
  <Flex direction="column" space="4">
    <Segmented.List highContrast>
      <Segmented.Trigger value="Segmented1">Segmented 1</Segmented.Trigger>
      <Segmented.Trigger value="Segmented2">Segmented 2</Segmented.Trigger>
      <Segmented.Trigger value="Segmented3">Segmented 3</Segmented.Trigger>
    </Segmented.List>
  </Flex>
</Segmented.Root>

Styled Segmenteds

A setup with customized Segmenteds using size, color, and radius.


<Segmented.Root defaultValue="Segmented1">
  <Segmented.List justify="start" shadow="3" size="small" color="indigo" radius="full">
    <Segmented.Trigger value="Segmented1">Segmented 1</Segmented.Trigger>
    <Segmented.Trigger value="Segmented2">Segmented 2</Segmented.Trigger>
    <Segmented.Trigger value="Segmented3">Segmented 3</Segmented.Trigger>
  </Segmented.List>
  <Container>
    <Row>
      <Col xs={24}>
        <Segmented.Content value="Segmented1">
          <Typography.Text> Segmented 1 content </Typography.Text>
        </Segmented.Content>
        <Segmented.Content value="Segmented2">
          <Typography.Text> Segmented 2 content </Typography.Text>
        </Segmented.Content>
        <Segmented.Content value="Segmented3">
          <Typography.Text> Segmented 3 content </Typography.Text>
        </Segmented.Content>
      </Col>
    </Row>
  </Container>
</Segmented.Root>

Event Handling

You can also handle click events of individual Segmenteds.


<Segmented.Root defaultValue="Segmented1">
  <Segmented.List highContrast>
    <Segmented.Trigger value="Segmented1" onClick={() => alert('Segmented 1 clicked!')}>
      Segmented 1
    </Segmented.Trigger>
    <Segmented.Trigger value="Segmented2" onClick={() => alert('Segmented 2 clicked!')}>
      Segmented 2
    </Segmented.Trigger>
  </Segmented.List>
  <Container>
    <Row>
      <Col xs={24}>
        <Segmented.Content value="Segmented1">
          <Typography.Text> Segmented 1 content </Typography.Text>
        </Segmented.Content>
        <Segmented.Content value="Segmented2">
          <Typography.Text> Segmented 2 content </Typography.Text>
        </Segmented.Content>
      </Col>
    </Row>
  </Container>
</Segmented.Root>

API

Props

RootProps

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`defaultValue`	`string`	-	Yes

ListProps

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`block`	`boolean`	-	-
`justify`	`'center' \| 'end' \| 'space-between' \| 'start'`	`'center'`	-
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`radius`	`ThemeRadius`	-	-
`size`	`Responsive<Size>`	`'medium'`	-
`highContrast`	`boolean`	-	-

TriggerProps

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`value`	`string`	-	Yes
`onClick`	`() => void`	-	-

ContentProps

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`value`	`string`	-	Yes

Radio Group

Select