Toggles View Source



The Toggle component is used to switch between two states.



Imports



Import React and the Toggle Component.


0
import * as React from "react";
1
import { Toggle } from "slate-react-system";


Usage



Declare the Toggle component.

0
class ExampleOne extends React.Component {
1
  state = { exampleOne: true };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <Toggle
8
        active={this.state.exampleOne}
9
        name="exampleOne"
10
        onChange={this._handleChange}
11
      />
12
    );
13
  }
14
}
15
16
class ExampleTwo extends React.Component {
17
  state = { exampleTwo: false };
18
19
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
20
21
  render() {
22
    return (
23
      <Toggle
24
        active={this.state.exampleTwo}
25
        name="exampleTwo"
26
        onChange={this._handleChange}
27
      />
28
    );
29
  }
30
}
31


Output








Accepted React Properties



Toggles
NameTypeDefaultDescription
onChange
function
null
Function called upon an onChange event
active
boolean
false
The value that the dropdown takes. Can be used to assign default values as well.
name
string
null
Input name
label
string
null
Label text
description
string
null
Description text
tooltip
string
null
Tooltip text


Components
Avatar GroupButtonsCard TabsCheckboxesColorsDropdownsGlobeHover TileIconsInputsList EditorLoadersNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source