@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiSwitch

Package: @uireact/form

^v3.13.6

A switch component so user can toggle inputs

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/form

Usage

This is a controlled input so you need to control the state of the toggle. This is done through the onChange and checked props.


  <SwitchExample />

SwitchExample:

export const SwitchExample: React.FC = () => {
  const [checked, setChecked] = useState(false);

  const onChangeCB = useCallback(() => {
    setChecked(!checked);
  }, [checked, setChecked]);

  return (
    <>
      <UiSwitch checked={checked} onChange={onChangeCB} name="switch-example" />
      <p>Checked: {`${checked}`}</p>
    </>
  );
};

UiSwitch disabled


  <UiSwitch name="disabled-checkbox" label="Select option" disabled />

UiSwitch with error


  <UiSwitch name="disabled-checkbox" label="Select option" error="Please select this option" />

UiSwitch with label on the start


  <UiSwitch name="start-label-checkbox" label="Select option" disabled labelPosition="start" />

UiSwitch with POSITIVE category


  <UiSwitch name="positive-checkbox" category="positive" checked />

UiSwitch with ERROR category


  <UiSwitch name="error-checkbox" category="error" checked />

UiSwitch with NEGATIVE category


  <UiSwitch name="negative-checkbox" category="negative" checked />