nili/ui
enfaartr
All components

Toggle

Overview
7 exports2 variant axes23 props4 files
import { Toggle, ToggleGroup } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Basic

One choice out of a few, always visible — the shape a Radio Group takes when the options are short and exclusive. value plus onValueChange to control it, defaultValue to leave it alone.

import { Toggle, ToggleGroup } from "@nili/ui"

export function Example() {
  const [view, setView] = useState("grid")

  return (
    <ToggleGroup value={view} onValueChange={setView} ariaLabel={t('view.label')}>
      <Toggle value="grid">{t('view.grid')}</Toggle>
      <Toggle value="list">{t('view.list')}</Toggle>
      <Toggle value="table">{t('view.table')}</Toggle>
    </ToggleGroup>
  )
}

With icons

startIcon puts a glyph before the label. iconOnly drops the label for a square button — give it an aria-label, since the icon is then the only thing naming it.

label and icon
icon only
import { Toggle, ToggleGroup, Icon } from "@nili/ui"
import { RiLayoutGridLine, RiListCheck, RiTableLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <ToggleGroup defaultValue="grid" ariaLabel={t('view.label')}>
        <Toggle value="grid" startIcon={<Icon icon={RiLayoutGridLine} />}>
          Grid
        </Toggle>
        <Toggle value="list" startIcon={<Icon icon={RiListCheck} />}>
          List
        </Toggle>
      </ToggleGroup>

      {/* icon only */}
      <ToggleGroup defaultValue="grid" ariaLabel={t('view.label')}>
        <Toggle value="grid" iconOnly aria-label={t('view.grid')}>
          <Icon icon={RiLayoutGridLine} />
        </Toggle>
        <Toggle value="list" iconOnly aria-label={t('view.list')}>
          <Icon icon={RiListCheck} />
        </Toggle>
      </ToggleGroup>
    </>
  )
}

Labelled group

label, sublabel and information render the same field header a Text Input gets, so a toggle inside a form lines up with everything around it.

import { Toggle, ToggleGroup, Icon } from "@nili/ui"
import { RiSunLine, RiMoonLine, RiComputerLine } from "@remixicon/react"

export function Example() {
  const [theme, setTheme] = useState("system")

  return (
    <ToggleGroup
      value={theme}
      onValueChange={setTheme}
      label="Appearance"
      sublabel="(syncs across devices)"
      information
      informationLabel="How we choose your theme"
    >
      <Toggle value="light" startIcon={<Icon icon={RiSunLine} />}>Light</Toggle>
      <Toggle value="dark" startIcon={<Icon icon={RiMoonLine} />}>Dark</Toggle>
      <Toggle value="system" startIcon={<Icon icon={RiComputerLine} />}>System</Toggle>
    </ToggleGroup>
  )
}

Disabled

Disable the whole group, or a single option that is unavailable for this account.

whole group
one option
import { Toggle, ToggleGroup } from "@nili/ui"

export function Example() {
  return (
    <>
      <ToggleGroup defaultValue="grid" disabled ariaLabel={t('view.label')}>
        <Toggle value="grid">Grid</Toggle>
        <Toggle value="list">List</Toggle>
      </ToggleGroup>

      <ToggleGroup defaultValue="grid" ariaLabel={t('view.label')}>
        <Toggle value="grid">Grid</Toggle>
        <Toggle value="table" disabled>Table</Toggle>
      </ToggleGroup>
    </>
  )
}