There are following components included:
Checkbox
Name | Type | Default | Description |
---|---|---|---|
checked | boolean | false | Defines whether the checkbox input is checked or not |
colors | object | Object with Tailwind CSS colors classes | |
colors.bgChecked | string | 'bg-primary' | Bg color when it is checked |
colors.borderChecked | string | 'border-primary' | Border color when it is checked |
colors.borderIos | string | 'border-black border-opacity-30 dark:border-white dark:border-opacity-30' | Checkbox border color in iOS theme |
colors.borderMaterial | string | 'border-black border-opacity-40 dark:border-white dark:border-opacity-40' | Checkbox border color in Material theme |
component | string | 'label' | Component's HTML Element |
defaultChecked | boolean | false | Defines whether the checkbox input is checked or not, for the case if it is uncontrolled component |
disabled | boolean | false | Defines whether the checkbox input is disabled |
indeterminate | boolean | false | Defines whether the checkbox input is in indeterminate state or not |
name | string | Checkbox input name | |
readOnly | boolean | false | Defines whether the checkbox input is readonly |
value | any | Checkbox input value | |
onChange | function(e) | Event will be triggered when checkbox state changed |
Checkboxes List is not a separate component, but just a particular case of using <List>
and <ListItem>
components.
<List>
{/* Additional "label" prop on ListItem */}
<ListItem
label
title="Books"
media={
<>
{/* Pass Checkbox to list item media */}
<Checkbox component="div" name="my-checkbox" />
</>
}
/>
<ListItem
label
title="Movies"
media={
<>
{/* Pass Checkbox to list item media */}
<Checkbox component="div" name="my-checkbox" />
</>
}
/>
</List>
import React, { useState } from 'react';import {Page,Navbar,NavbarBackLink,Checkbox,BlockTitle,Block,List,ListItem,} from 'konsta/react';export default function CheckboxPage() {const [checked1, setChecked1] = useState(false);const [checked2, setChecked2] = useState(true);// Groupconst [group, setGroup] = useState(['Books']);const toggleGroupValue = (value) => {if (group.includes(value)) group.splice(group.indexOf(value), 1);else group.push(value);setGroup([...group]);};// Indeterminateconst [movies, setMovies] = useState(['Movie 1']);const onMovieChange = (e) => {const value = e.target.value;if (e.target.checked) {movies.push(value);} else {movies.splice(movies.indexOf(value), 1);}setMovies([...movies]);};const onMoviesChange = () => {if (movies.length === 1 || movies.length === 0) {setMovies(['Movie 1', 'Movie 2']);} else if (movies.length === 2) {setMovies([]);}};// Mediaconst [media, setMedia] = useState(['Item 1']);const toggleMediaValue = (value) => {if (media.includes(value)) media.splice(media.indexOf(value), 1);else media.push(value);setMedia([...media]);};return (<Page><Navbartitle="Checkbox"/><BlockTitle>Inline</BlockTitle><Block strong><p>Lorem{' '}<Checkboxname="checkbox-1"checked={checked1}onChange={(e) => setChecked1(e.target.checked)}/>{' '}ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illonihil aut eius commodi sint eveniet aliquid eligendi{' '}<Checkboxname="checkbox-2"checked={checked2}onChange={(e) => setChecked2(e.target.checked)}/>{' '}ad delectus impedit tempore nemo, enim vel praesentium consequaturnulla mollitia!</p></Block><BlockTitle>Checkbox Group</BlockTitle><List><ListItemlabeltitle="Books"media={<Checkboxcomponent="div"name="demo-checkbox"checked={group.includes('Books')}onChange={() => toggleGroupValue('Books')}/>}/><ListItemlabeltitle="Movies"media={<Checkboxcomponent="div"name="demo-checkbox"checked={group.includes('Movies')}onChange={() => toggleGroupValue('Movies')}/>}/><ListItemlabeltitle="Food"media={<Checkboxcomponent="div"name="demo-checkbox"checked={group.includes('Food')}onChange={() => toggleGroupValue('Food')}/>}/><ListItemlabeltitle="Drinks"media={<Checkboxcomponent="div"name="demo-checkbox"checked={group.includes('Drinks')}onChange={() => toggleGroupValue('Drinks')}/>}/></List><BlockTitle>Indeterminate State</BlockTitle><List><ListItemlabeltitle="Movies"name="demo-checkbox"media={<Checkboxchecked={movies.length === 2}indeterminate={movies.length === 1}onChange={onMoviesChange}/>}><ul className="pl-12"><ListItemlabeltitle="Movie 1"media={<Checkboxname="demo-checkbox"value="Movie 1"checked={movies.indexOf('Movie 1') >= 0}onChange={onMovieChange}/>}/><ListItemlabeltitle="Movie 2"media={<Checkboxname="demo-checkbox"value="Movie 2"checked={movies.indexOf('Movie 2') >= 0}onChange={onMovieChange}/>}/></ul></ListItem></List><BlockTitle>With Media Lists</BlockTitle><List><ListItemlabeltitle="Facebook"after="17:14"subtitle="New messages from John Doe"text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."media={<Checkboxcomponent="div"name="demo-media-checkbox"checked={media.includes('Item 1')}onChange={() => toggleMediaValue('Item 1')}/>}/><ListItemlabeltitle="John Doe (via Twitter)"after="17:11"subtitle="John Doe (@_johndoe) mentioned you on Twitter!"text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."media={<Checkboxcomponent="div"name="demo-media-checkbox"checked={media.includes('Item 2')}onChange={() => toggleMediaValue('Item 2')}/>}/></List></Page>);}