Framework7
v3
Support Framework7
18,400 stars3,226 forks
iOSAndroid
Improve this Doc

Toggle React Component

Toggle React component represents Toggle component.

Toggle Components

There are following components included:

  • Toggle / F7Toggle

Toggle Properties

Prop Type Default Description
<Toggle> properties
init boolean true Initializes Toggle
name string Toggle input name
value string
number		 Toggle input value
checked boolean false Defines whether the toggle input is checked or not
disabled boolean false Defines whether the toggle input is disabled or not
readonly boolean false Defines whether the toggle input is readonly or not

Toggle Events

Event Description
<Toggle> events
change Event 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
toggleChange Event will be triggered when toggle checkbox state changed

Toggle Methods

Event Description
<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>