Switch

Choose between a set of options.

Default

Ensure the width of each item is wide enough to prevent jumping when active.

Code Editor

() => {
  const [active, setActive] = useState('source')

  return (
    <Container left>
      <Switch
        items={[
          {
            name: 'Source',
            value: 'source',
            width: 80
          },
          {
            name: 'Output',
            value: 'output',
            width: 90
          }
        ]}
        active={active}
        onChange={v => setActive(v)}
      />
    </Container>
  )
}

() => {
  const [active, setActive] = useState('source')
  return (
    <Container left>
      <Switch
        items={[
          {
            name: 'Source',
            value: 'source',
            width: 80
          },
          {
            name: 'Output',
            value: 'output',
            width: 90
          }
        ]}
        active={active}
        onChange={v => setActive(v)}
      />
    </Container>
  )
}

Disabled

Code Editor

() => {
  const [active, setActive] = useState('source')

  return (
    <Container left>
      <Switch
        items={[
          {
            name: 'Source',
            value: 'source',
            width: 80
          },
          {
            name: 'Output',
            value: 'output',
            width: 90,
            disabled: true
          }
        ]}
        active={active}
        onChange={v => setActive(v)}
      />
    </Container>
  )
}

() => {
  const [active, setActive] = useState('source')
  return (
    <Container left>
      <Switch
        items={[
          {
            name: 'Source',
            value: 'source',
            width: 80
          },
          {
            name: 'Output',
            value: 'output',
            width: 90,
            disabled: true
          }
        ]}
        active={active}
        onChange={v => setActive(v)}
      />
    </Container>
  )
}

Sizes

Code Editor

() => {
  const [active, setActive] = useState('source')
  const items = [
    {
      name: 'Source',
      value: 'source',
      width: 80
    },
    {
      name: 'Output',
      value: 'output',
      width: 100
    }
  ]

  return (
    <Container top direction={['column', 'column', 'row']}>
      <Container left>
        <Switch
          items={items}
          active={active}
          onChange={v => setActive(v)}
          size="small"
        />
      </Container>

      <Container left>
        <Switch
          items={items}
          active={active}
          onChange={v => setActive(v)}
        />
      </Container>

      <Container left>
        <Switch
          items={items}
          active={active}
          onChange={v => setActive(v)}
          size="large"
        />
      </Container>
    </Container>
  )
}

() => {
  const [active, setActive] = useState('source')
  const items = [
    {
      name: 'Source',
      value: 'source',
      width: 80
    },
    {
      name: 'Output',
      value: 'output',
      width: 100
    }
  ]
  return (
    <Container top direction={['column', 'column', 'row']}>
      <Container left>
        <Switch
          items={items}
          active={active}
          onChange={v => setActive(v)}
          size="small"
        />
      </Container>
      <Container left>
        <Switch
          items={items}
          active={active}
          onChange={v => setActive(v)}
        />
      </Container>
      <Container left>
        <Switch
          items={items}
          active={active}
          onChange={v => setActive(v)}
          size="large"
        />
      </Container>
    </Container>
  )
}