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