Skip to content
Paramanu v0.1.0-alpha.0

Segmented Control

The Segmented Control provides a set of mutually exclusive options in a button-group layout.

Basic Usage

import { SegCtrl } from "@paramanu/forms-react"


export default function App() {
  return (
    <SegCtrl>
      <button aria-pressed="true">Day</button>
      <button>Week</button>
      <button>Month</button>
    </SegCtrl>
  )
}
<div class="pm-seg-ctrl pm-seg-ctrl--md" role="radiogroup">
  <button type="button" class="pm-seg-ctrl__item" aria-pressed="true">Day</button>
  <button type="button" class="pm-seg-ctrl__item">Week</button>
  <button type="button" class="pm-seg-ctrl__item">Month</button>
</div>

Full Width

import { SegCtrl } from "@paramanu/forms-react"


export default function App() {
  return (
    <SegCtrl fullWidth>
      <button aria-pressed="true">Tab 1</button>
      <button>Tab 2</button>
    </SegCtrl>
  )
}
<div class="pm-seg-ctrl pm-seg-ctrl--md pm-seg-ctrl--full-width" role="radiogroup">
  <button type="button" class="pm-seg-ctrl__item" aria-pressed="true">Tab 1</button>
  <button type="button" class="pm-seg-ctrl__item">Tab 2</button>
</div>