Fusion UI

Overview

A Switch turns a setting on or off. The change takes effect right away, without saving.

Switch Label

"use client";

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

export const SwitchExample = () => {
  const [switches, setSwitches] = useState(new Map<number, boolean>([]));
  return (
    <Switch
      value={switches.get(1)}
      onChange={value => setSwitches(curr => new Map(curr.set(1, value)))}
      label={"Switch Label"}></Switch>
  );
};

Playground

import { Switch } from "@brynlabs/fusion-ui"

<Switch
  label={"Form field label"}
  required={false}
  invalid={false}
  value={false}
  disabled={false}
  onChange={() => {...}}>
</Switch>

Switch group

SwitchGroup lists related switches with a common label.

"use client";

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

export const SwitchGroupExample = () => {
  const [switches, setSwitches] = useState(new Map<number, boolean>([]));
  return (
    <SwitchGroup label={"Switch Group Label"} hint={"Switch Group Hint"}>
      <Switch
        invalid={!switches.get(1)}
        value={switches.get(1)}
        onChange={value => setSwitches(curr => new Map(curr.set(1, value)))}
        required={true}
        label={"Switch"}></Switch>
      <Switch
        invalid={switches.get(2)}
        value={switches.get(2)}
        onChange={value => setSwitches(curr => new Map(curr.set(2, value)))}
        label={"Zweiter Switch"}></Switch>
      <Switch
        value={switches.get(3)}
        onChange={value => setSwitches(curr => new Map(curr.set(3, value)))}
        label={"Dritter Switch"}></Switch>
      <Switch disabled={true} value={false} label={"Vierter Switch"}></Switch>
      <Switch disabled={true} value={true} label={"Fünfter Switch"}></Switch>
      <Switch disabled={true} invalid={true} value={true} label={"Sechster Switch"}></Switch>
      <Switch disabled={true} invalid={true} value={false} label={"Siebter Switch"}></Switch>
    </SwitchGroup>
  );
};