Toggle React Component

Toggle React component represents Toggle component.

Toggle Components

There are following components included:

  • Toggle / F7Toggle

Toggle Properties

PropTypeDefaultDescription
<Toggle> properties
initbooleantrueInitializes Toggle
namestringToggle input name
valuestring
number
Toggle input value
checkedbooleanfalseDefines whether the toggle input is checked or not
disabledbooleanfalseDefines whether the toggle input is disabled or not
readonlybooleanfalseDefines whether the toggle input is readonly or not

Toggle Events

EventDescription
<Toggle> events
changeEvent will be triggered when toggle checkbox state changed. This event may not occur on touch devices, so it is better to use next toggle:change event instead
toggleChangeEvent will be triggered when toggle checkbox state changed

Toggle Methods

EventDescription
<Toggle> methods
.toggle()Toggle checkbox state

Examples

<BlockTitle>Super Heroes</BlockTitle>
<List simpleList>
  <ListItem>
    <span>Batman</span>
    <Toggle defaultChecked />
  </ListItem>
  <ListItem>
    <span>Aquaman</span>
    <Toggle defaultChecked color="blue" />
  </ListItem>
  <ListItem>
    <span>Superman</span>
    <Toggle defaultChecked color="red" />
  </ListItem>
  <ListItem>
    <span>Hulk</span>
    <Toggle color="green" />
  </ListItem>
  <ListItem>
    <span>Spiderman (Disabled)</span>
    <Toggle disabled />
  </ListItem>
  <ListItem>
    <span>Ironman (Disabled)</span>
    <Toggle defaultChecked disabled />
  </ListItem>
  <ListItem>
    <span>Thor</span>
    <Toggle defaultChecked color="orange" />
  </ListItem>
  <ListItem>
    <span>Wonder Woman</span>
    <Toggle color="pink" />
  </ListItem>
</List>