SegmentedControl

Anatomy of the segmented control component
Item	Name	Description
A	`<SegmentedControl />`	The parent component — rendered as a `<div>` — that wraps `<SegmentedControlInput />`children components.
B	`<SegmentedControlInput />`	A styled `<input type= “radio” \| “checkbox”/>`to look like a Button.

SegementedControl can span to fill its container or be set to a fixed width. SegmentedControlInputs are each equal widths.

Breakdown of the control showing its dimensions — SegementedControl can span to fill its container or be set to a fixed width. SegmentedControlInputs are each equal widths.

Breakdown of the SegmentedControlInput with its subcomponents. — Anatomy of a SegmentedControlInput

Anatomy of the SegmentedControlInput component
Item	Name	Description
A	Container	The parent container — rendered as a `<div>` — that wraps the `<input>` and `<label>` children.
B	Before slot	A slot to render an Icon.
C	Label	A text span to convey what the option does.
D	After slot	A slot to render an Icon.

Breakdown of the SegmentedControlInput showing its dimensions. — Blueprint of a SegmentedControlInput

Management clearly communicates business goals to me

Please answer how you feel about this statement

import React from 'react'

import { SegmentedControl, SegmentedControlInput } from '@gusto/workbench'

export const Radio = () => {
  return (
    <SegmentedControl
      legend="Management clearly communicates business goals to me"
      helperText="Please answer how you feel about this statement"
      name="radio"
    >
      <SegmentedControlInput
        type="radio"
        value="strong-disagree"
        defaultChecked
      >
        Strongly disagree
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" value="disagree">
        Disagree
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" value="neutral">
        Neutral
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" value="agree">
        Agree
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" value="strong-agree">
        Strongly agree
      </SegmentedControlInput>
    </SegmentedControl>
  )
}

import React from 'react'

import { Flex, SegmentedControl, SegmentedControlInput } from '@gusto/workbench'

export const Sizes = () => {
  return (
    <Flex flexDirection="column" rowGap="1rem">
      <SegmentedControl legend="Small Sizes" name="size-small" size="small">
        <SegmentedControlInput type="radio" value="small-one" defaultChecked>
          Small
        </SegmentedControlInput>
        <SegmentedControlInput type="radio" value="small-two">
          Small
        </SegmentedControlInput>
        <SegmentedControlInput type="radio" value="small-three">
          Small
        </SegmentedControlInput>
      </SegmentedControl>
      <SegmentedControl legend="Medium Sizes" name="size-medium">
        <SegmentedControlInput type="radio" value="medium-one" defaultChecked>
          Medium
        </SegmentedControlInput>
        <SegmentedControlInput type="radio" value="medium-one">
          Medium
        </SegmentedControlInput>
        <SegmentedControlInput type="radio" value="medium-one">
          Medium
        </SegmentedControlInput>
      </SegmentedControl>
    </Flex>
  )
}

How much would you like to save from each paycheck?

1%

$10

2%

$20

10%

$200

Other

import React from 'react'

import {
  SegmentedControl,
  SegmentedControlByline,
  SegmentedControlInput,
} from '@gusto/workbench'

export const Byline = () => {
  return (
    <SegmentedControl
      legend="How much would you like to save from each paycheck?"
      name="byline"
    >
      <SegmentedControlInput type="radio" defaultChecked value="10">
        <SegmentedControlByline>1%</SegmentedControlByline>
        $10
      </SegmentedControlInput>

      <SegmentedControlInput type="radio" value="20">
        <SegmentedControlByline>2%</SegmentedControlByline>
        $20
      </SegmentedControlInput>

      <SegmentedControlInput type="radio" value="200">
        <SegmentedControlByline>10%</SegmentedControlByline>
        $200
      </SegmentedControlInput>

      <SegmentedControlInput type="radio" value="other">
        Other
      </SegmentedControlInput>
    </SegmentedControl>
  )
}

import React from 'react'

import { SegmentedControl, SegmentedControlInput } from '@gusto/workbench'
import {
  Happy,
  Neutral,
  Unhappy,
  VeryHappy,
  VeryUnhappy,
} from '@gusto/workbench-icons'

export const Icons = () => {
  return (
    <SegmentedControl
      legend="How do you feel about your experience?"
      name="icon-test"
    >
      <SegmentedControlInput
        type="radio"
        title="Very unhappy"
        value="happy"
        defaultChecked
      >
        <VeryUnhappy />
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" title="Unhappy" value="unhappy">
        <Unhappy />
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" title="Neutral" value="neutral">
        <Neutral />
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" title="Happy" value="happy">
        <Happy />
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" title="Very happy" value="very-happy">
        <VeryHappy />
      </SegmentedControlInput>
    </SegmentedControl>
  )
}

What emails would you like to receive?

Choose any or all of the below email types

New features

Security updates

Payday

import React from 'react'

import { SegmentedControl, SegmentedControlInput } from '@gusto/workbench'
import { Checks, LockClosed, Present } from '@gusto/workbench-icons'

export const Checkbox = () => {
  return (
    <SegmentedControl
      legend="What emails would you like to receive?"
      helperText="Choose any or all of the below email types"
      name="multiple-checkbox"
    >
      <SegmentedControlInput before={<Present />} type="checkbox" value="new">
        New features
      </SegmentedControlInput>
      <SegmentedControlInput
        before={<LockClosed />}
        type="checkbox"
        value="security"
      >
        Security updates
      </SegmentedControlInput>
      <SegmentedControlInput before={<Checks />} type="checkbox" value="payday">
        Payday
      </SegmentedControlInput>
    </SegmentedControl>
  )
}

Management clearly communicates business goals to me

Please answer how you feel about this statement

import React from 'react'

import { SegmentedControl, SegmentedControlInput } from '@gusto/workbench'

export const Disabled = () => {
  return (
    <SegmentedControl
      legend="Management clearly communicates business goals to me"
      helperText="Please answer how you feel about this statement"
      name="disabled"
      disabled
    >
      <SegmentedControlInput type="radio" value="strong-disagree">
        Strongly disagree
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" value="disagree">
        Disagree
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" value="neutral">
        Neutral
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" value="agree">
        Agree
      </SegmentedControlInput>
      <SegmentedControlInput type="radio" value="strong-agree">
        Strongly agree
      </SegmentedControlInput>
    </SegmentedControl>
  )
}

React props
Name	Type	Default	Description
children	`ReactNode`	-	The content of the component.
helperText	`ReactNode`	-	A brief description or hint for the `input`; can be used to link to an external resource.
legend Required	`string`	-	Label text associated with the group.
size	`smallmedium`	medium	The size of the button when variant is set to "primary" or "secondary".

React props
Name	Type	Default	Description
aria-label	`string`	-	The accessible name for this item. Most commonly the input name.
after	`ReactNode`	-	Content shown after children.
before	`ReactNode`	-	Content shown before the children.
children	`ReactNode`	-	The content of the component.
id	`string`	-	The ID of the `input` element.
label Required	`string`	-	Label associated with the `input`.
size	`smallmedium`	medium	The size of the button when variant is set to "primary" or "secondary".
title	`string`	-
type Required	`checkboxradio`	-	The type of the input (checkbox or radio)

When selected, the option’s background and text color meet the minimum contrast requirement of 3:1 with its siblings. For more information, see footnote 1
Icons and their backgrounds meet the minimum requirements of 3:1 contrast ratio for non-text content. For more information, see footnote 1
The touch-target area of each option meets the requirement of 44 by 44 CSS pixels. For more information, see footnote 2
When <SegmentedControl /> is used as a checkbox, the native checkbox accessibility behaviors apply. For example, tab will navigate to the previous or next cards and space will check or uncheck the option. For more information, see footnote 3, For more information, see footnote 4
When <SegmentedControl /> is used as a radio, the native radio behaviors will apply. For example, tab will navigate to the radio group and arrow keys will navigate to the previous or next cards and will check or uncheck the option when in focus. For more information, see footnote 5, For more information, see footnote 6
Each option is presented in equal width to prevent bias. For more information, see footnote 7
A label is required to ensure the underlying input has content associated to it for screen reader accessibility. For more information, see footnote 8

<SegmentedControl /> uses an <input type="checkbox" /> or <input type="radio" /> under the hood. For testing the input state of <SegmentedControl />, refer to the Checkbox testing docs or Radio testing docs

Show code

Show code

Show code

Show code

Show code

Show code