-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Checkboxes & Radios React Component
Checkboxes & Radios is not a separate component, but just a particular case of using <List> and <ListItem> components.
Check out Framework7's Checkboxes & Radios for their appearance.
Usage examples
Checkboxes Group
<List form>
<ListItem checkbox name="my-checkbox" value="1" title="Checkbox 1" checked></ListItem>
<ListItem checkbox name="my-checkbox" value="2" title="Checkbox 1"></ListItem>
<ListItem checkbox name="my-checkbox" value="3" title="Checkbox 1"></ListItem>
</List>
Radios Group
<List form>
<ListItem radio name="my-radio" value="1" title="Radio 1" checked></ListItem>
<ListItem radio name="my-radio" value="2" title="Radio 2"></ListItem>
<ListItem radio name="my-radio" value="3" title="Radio 3"></ListItem>
</List>
Properties
Prop | Type | Default | Description |
---|---|---|---|
<ListItem>'s Checkboxes & Radios specific properties | |||
checkbox | boolean | Enables checkbox-item | |
radio | boolean | Enables radio-item | |
checked | boolean | Whether the checkbox/radio input is checked | |
name | string | Checkbox/radio input name | |
value | string/number | Checkbox/radio input value | |
readonly | boolean | Whether the checkbox/radio input is readonly | |
disabled | boolean | Whether the checkbox/radio input is disabled | |
required | boolean | Whether the checkbox/radio input is required |