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
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source