Ark UI

Usage

Start by importing the necessary components from the package:

import {
  Segment,
  SegmentControl,
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentLabel,
} from '@ark-ui/react'

Here are some examples of how to use the SegmentGroup component:

import { useState } from 'react'
import { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentLabel } from './index'

const Basic = () => (
  <SegmentGroup>
    <SegmentGroupIndicator />
    {options.map((option, id) => (
      <Segment key={id} value={option.id}>
        <SegmentLabel>{option.label}</SegmentLabel>
        <SegmentControl />
      </Segment>
    ))}
  </SegmentGroup>
)

import { For, createSignal } from 'solid-js'
import { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentLabel } from '@ark-ui/solid'

const Basic = () => {
  return (
    <SegmentGroup>
      <SegmentGroupIndicator />
      <For each={options}>
        {(option) => (
          <Segment value={option.id}>
            <SegmentLabel>{option.label}</SegmentLabel>
            <SegmentControl />
          </Segment>
        )}
      </For>
    </SegmentGroup>
  )
}

Story not available

Initial Value

To set a default segment on initial render, use the defaultValue prop:

import { useState } from 'react'
import { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentLabel } from './index'

const InitialValue = () => (
  <SegmentGroup defaultValue="react">
    <SegmentGroupIndicator />
    {options.map((option, id) => (
      <Segment key={id} value={option.id}>
        <SegmentLabel>{option.label}</SegmentLabel>
        <SegmentControl />
      </Segment>
    ))}
  </SegmentGroup>
)

Story not available

Story not available

Controlled SegmentGroup

To create a controlled SegmentGroup component, manage the current selected segment using the value prop and update it when the onChange event handler is called:

import { useState } from 'react'
import { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentLabel } from './index'

const Controlled = () => {
  const [value, setValue] = useState('react')
  return (
    <SegmentGroup value={value} onValueChange={(e) => setValue(e.value)}>
      <SegmentGroupIndicator />
      {options.map((option, id) => (
        <Segment key={id} value={option.id}>
          <SegmentLabel>{option.label}</SegmentLabel>
          <SegmentControl />
        </Segment>
      ))}
    </SegmentGroup>
  )
}

import { For, createSignal } from 'solid-js'
import { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentLabel } from '@ark-ui/solid'

const Controlled = () => {
  const [value, setValue] = createSignal('react')
  return (
    <SegmentGroup value={value()} onValueChange={({ value }) => setValue(value)}>
      <SegmentGroupIndicator />
      <For each={options}>
        {(option) => (
          <Segment value={option.id}>
            <SegmentLabel>{option.label}</SegmentLabel>
            <SegmentControl />
          </Segment>
        )}
      </For>
    </SegmentGroup>
  )
}

Story not available

Disabled Segment

To disable a segment, simply pass the disabled prop to the Segment component:

import { useState } from 'react'
import { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentLabel } from './index'

const Disabled = () => (
  <SegmentGroup defaultValue="react">
    <SegmentGroupIndicator />
    {options.map((option, id) => (
      <Segment key={id} value={option.id} disabled={option.id === 'svelte'}>
        <SegmentLabel>{option.label}</SegmentLabel>
        <SegmentControl />
      </Segment>
    ))}
  </SegmentGroup>
)

import { For, createSignal } from 'solid-js'
import { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentLabel } from '@ark-ui/solid'

const Disabled = () => {
  const [value, setValue] = createSignal('react')
  return (
    <SegmentGroup value={value()} onValueChange={({ value }) => setValue(value)}>
      <SegmentGroupIndicator />
      <For each={options}>
        {(option) => (
          <Segment value={option.id} disabled={option.id === 'svelte'}>
            <SegmentLabel>{option.label}</SegmentLabel>
            <SegmentControl />
          </Segment>
        )}
      </For>
    </SegmentGroup>
  )
}

Story not available

Conclusion

The SegmentGroup component provides a versatile and adaptable solution for introducing segmented navigation to your applications. With a broad variety of customization options and features, it can cater to various use cases and designs.

Segment Group

Usage

Initial Value

Controlled SegmentGroup

Disabled Segment

Conclusion