Switch Button

The Switch Button control provides the possibility to turn on and off some app settings depending on the position of the button. You can create a switched on button, a disabled button or even initialize a disabled switched on button, if you need to prevent users from changing the default settings.

Related resources

• Get the widget by installing the @svar-ui/react-core package.
• Check the API Reference to see the list of configuration properties.
• Explore the samples to visualize the available features.

Initialization

To create a Switch instance on a page, you need to complete two steps:

• import the source file of the control on a page:

App.jsx

import { Switch } from "@svar-ui/react-core";

• use the <Switch> tag to initialize the control:

App.jsx

export default function App() {
  return <Switch />;
}

A default switch button is initialized turned off with no label.

Setting the value

The Switch button is initialized on a page turned off. Use the value property to control the state of the button. Set the property to true to turn the button on:

<Switch value={true} />

Related sample: Switch Button

Getting the current state

It is possible to get the state of a Switch button. For this, you need:

• specify a state variable that will contain the state of the Switch button (it may contain the initial state). In React, use the useState hook:

import { useState } from "react";
import { Switch } from "@svar-ui/react-core";

export default function App() {
  const [state, setState] = useState(true);

  return <Switch value={state} onChange={v => setState(v.value)} />;
}

• bind the variable to the value property of the control and update it in the onChange handler. The control calls onChange with an object that contains the new value in value, so update your state accordingly as shown above.

If the name of the variable matches its value, you can use the same pattern with the variable named value:

import { useState } from "react";
import { Switch } from "@svar-ui/react-core";

export default function App() {
  const [value, setValue] = useState(true);

  return <Switch value={value} onChange={v => setValue(v.value)} />;
}

After that the value assigned to the state will be updated on each change of the state of the Switch button.

Related sample: Switch Button

Setting the disabled state

You can initialize a disabled Switch Button with the help of the disabled property. Set the property to true or specify it without any value, like this:

<Switch disabled={true} />

or

<Switch disabled />

Related sample: Switch Button

Adding a label

A default switch button has no label. To add it, you can use the Field component and complete several steps:

• include the Field source file on a page, declare the <Field> tag and fill it with the necessary props:
  • add a desired label via the label property. Besides a simple text, you can display the current control's state in the label (see the example below)
  • set the type="switch" property for the Field component
  • set the position="left" property, if you want to place the label to the left of the switch button
  • specify the id variable to bind the field and switch controls

import { useState } from "react";
import { Field } from "@svar-ui/react-core";

export default function Example() {
  const [v1, setV1] = useState(false);

  return (
    <Field label={`Switch:${v1}`} position="left" type="switch">
      {({ id }) => {
        // child rendering function receives { id } from Field
        // actual Switch should be rendered here (see next example)
        return null;
      }}
    </Field>
  );
}

After that, wrap the switch button in question in the <Field> tags and specify the id property for the switch button. In React the Field component exposes the id to its children via a render function (children as a function). Use that id to wire the Field and Switch together:

import { useState } from "react";
import { Switch, Field } from "@svar-ui/react-core";

export default function App() {
  const [v1, setV1] = useState(false);

  return (
    <Field label={`Switch:${v1}`} position="left" type="switch">
      {({ id }) => (
        <Switch
          id={id}
          value={v1}
          onChange={v => setV1(v.value)}
        />
      )}
    </Field>
  );
}

Related sample: Switch Button