Fusion UI

Overview

A SwitchSelect shows two to five options of which exactly one is active, like radio buttons. Selecting another option takes effect right away. It replaces the deprecated SegmentedButton.

"use client";

import {IconComputer, IconMoon, IconSun, SwitchSelect} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const SwitchSelectExample = () => {
  const [theme, setTheme] = useState("light");
  return (
    <SwitchSelect
      aria-label={"Theme"}
      value={theme}
      onChange={setTheme}
      options={[
        {label: "Light", icon: <IconSun />, value: "light"},
        {label: "Dark", icon: <IconMoon />, value: "dark"},
        {label: "System", icon: <IconComputer />, value: "system"},
      ]}
    />
  );
};

Labels and icons

Options show a label, an icon or both. With hideLabel only the icon is visible, the label stays the accessible name and shows up as tooltip. When all options have an icon and the labels don’t fit, e.g. on phones, only the icons are shown until there is enough space again.

"use client";

import {IconLayoutGrid, IconListUnordered, SwitchSelect} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const SwitchSelectTypesExample = () => {
  const [period, setPeriod] = useState("week");
  const [view, setView] = useState("list");
  return (
    <div style={{display: "flex", flexDirection: "column", alignItems: "start", gap: "16px"}}>
      <SwitchSelect
        aria-label={"Period"}
        value={period}
        onChange={setPeriod}
        options={[
          {label: "Day", value: "day"},
          {label: "Week", value: "week"},
          {label: "Month", value: "month"},
          {label: "Year", value: "year", disabled: true},
        ]}
      />
      <SwitchSelect
        aria-label={"View"}
        value={view}
        onChange={setView}
        options={[
          {label: "List", icon: <IconListUnordered />, hideLabel: true, value: "list"},
          {label: "Grid", icon: <IconLayoutGrid />, hideLabel: true, value: "grid"},
        ]}
      />
    </div>
  );
};

Full width

fullWidth stretches the options over the available width, each taking the same space.

"use client";

import {SwitchSelect} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const SwitchSelectFullWidthExample = () => {
  const [billing, setBilling] = useState("yearly");
  return (
      <SwitchSelect
        aria-label={"Billing period"}
        fullWidth
        value={billing}
        onChange={setBilling}
        options={[
          {label: "Monthly", value: "monthly"},
          {label: "Yearly", value: "yearly"},
        ]}
      />
  );
};

Form field

Like the other inputs it takes a label, hint, errorMessage, required, invalid and disabled. The label names the group for screen readers.

"use client";

import {SwitchSelect} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const SwitchSelectFormFieldExample = () => {
  const [billing, setBilling] = useState<string>();
  return (
    <div style={{display: "flex", flexDirection: "column", gap: "16px", maxWidth: "24rem"}}>
      <SwitchSelect
        label={"Billing period"}
        hint={"Yearly saves 15%"}
        errorMessage={"Choose a billing period"}
        required
        invalid={true}
        fullWidth
        value={billing}
        onChange={setBilling}
        options={[
          {label: "Monthly", value: "monthly"},
          {label: "Yearly", value: "yearly"},
        ]}
      />
      <SwitchSelect
        label={"Delivery"}
        disabled
        value={"standard"}
        onChange={() => {}}
        options={[
          {label: "Standard", value: "standard"},
          {label: "Express", value: "express"},
        ]}
      />
    </div>
  );
};

Switch Select

Overview

Labels and icons

Full width

Form field