import React from 'react'; import { Checkbox } from '@douyinfe/semi-ui'; () => ( <Checkbox aria-label="Checkbox demo" onChange={e => console.log(e)}> Semi Design </Checkbox> );

import React from 'react'; import { Checkbox } from '@douyinfe/semi-ui'; () => ( <Checkbox defaultChecked onChange={e => console.log(e)} aria-label="Checkbox demo" > Semi Design </Checkbox> );

import React from 'react'; import { Checkbox } from '@douyinfe/semi-ui'; () => ( <> <Checkbox extra='Semi Design is a design system developed and maintained by IES Front-end Team and UED Team' aria-label="Checkbox demo" > Semi Design </Checkbox> <br/> <Checkbox extra='Semi Design is a design system developed and maintained by IES Front-end Team and UED Team' aria-label="Checkbox demo" style={{ width: 400 }} > Semi Design </Checkbox> </> );

import React from 'react'; import { Checkbox } from '@douyinfe/semi-ui'; () => ( <div> <Checkbox defaultChecked={false} disabled aria-label="Checkbox demo">UnChecked Disabled</Checkbox> <br /> <Checkbox defaultChecked disabled aria-label="Checkbox demo">Checked Disabled</Checkbox> </div> );

import React from 'react'; import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui'; () => ( <CheckboxGroup style={{ width: '100%' }} defaultValue={['A', 'B']} aria-label="CheckboxGroup demo"> <Checkbox value="A">A</Checkbox> <Checkbox value="B">B</Checkbox> <Checkbox value="C">C</Checkbox> <Checkbox value="D">D</Checkbox> <Checkbox value="E">E</Checkbox> </CheckboxGroup> );

import React from 'react'; import { CheckboxGroup } from '@douyinfe/semi-ui'; class App extends React.Component { render() { function onChange(checkedValues) { console.log('checked = ', checkedValues); } const plainOptions = ['semi', 'vigo', 'helo']; const options = [ { label: 'Aim for the highest', value: '1', extra: "Raise the bar. Wait for bigger gains. Find the best solutions by widening your perspective. Be attentive. Distill ideas down to their fundamental truths. Keep learning and growing" }, { label: 'Be grounded & courageous', value: '2', extra: "Make your own discoveries. Dive deep into facts. Stay level-headed. Focus on impact. Assume ownership, take risks, break the mold. Rapid iterations, multiple possibilities." }, { label: 'Be open & humble', value: '3', extra: "Trust yourself, trust each other. Be willing to offer and ask for help. Collaboration creates value. Approach problems with the big picture in mind. Be mindful and check your ego; stay open to different ideas." }, { label: 'Be candid & clear', value: '4', extra: "Dare to share your honest opinions. It's okay to make mistakes. Own it when you do. Stick to the facts, identify issues, and avoid \'leader-pleasing.\' Be accurate and forthright; be methodical and focused." } ]; const optionsWithDisabled = [ { label: 'Photography', value: 'Photography' }, { label: 'Movies', value: 'Movies' }, { label: 'Running', value: 'Running', disabled: false }, ]; return ( <div> <CheckboxGroup options={plainOptions} defaultValue={['semi']} onChange={onChange} aria-label="CheckboxGroup demo" /> <br/><br/> <CheckboxGroup options={options} defaultValue={[]} onChange={onChange} aria-label="CheckboxGroup demo" /> <br/><br/> <CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['Photography']} onChange={onChange} aria-label="Checkbox demo" /> </div> ); } }

import React from 'react'; import { CheckboxGroup } from '@douyinfe/semi-ui'; () => { const options = [ { label: 'semi', value: 'semi' }, { label: 'hotsoon', value: 'hotsoon' }, { label: 'pipixia', value: 'pipixia' }, { label: 'toutiao', value: 'toutiao' } ]; return ( <CheckboxGroup options={options} direction='horizontal' aria-label="CheckboxGroup demo" /> ); };

import React from 'react'; import { Checkbox, Button } from '@douyinfe/semi-ui'; class App extends React.Component { constructor() { super(); this.state = { checked: true, disabled: false, }; this.toggleChecked = this.toggleChecked.bind(this); this.toggleDisable = this.toggleDisable.bind(this); this.onChange = this.onChange.bind(this); } toggleChecked () { this.setState({ checked: !this.state.checked }); }; toggleDisable () { this.setState({ disabled: !this.state.disabled }); }; onChange (e) { console.log('checked = ', e.target.checked); this.setState({ checked: e.target.checked, }); }; render() { const label = `${this.state.checked ? 'Checked' : 'Unchecked'} ${ this.state.disabled ? 'Disabled' : 'Enabled' }`; return ( <div> <p style={{ marginBottom: '20px' }}> <Checkbox checked={this.state.checked} disabled={this.state.disabled} onChange={this.onChange} aria-label="Checkbox demo" > {label} </Checkbox> </p> <p> <Button type="primary" size="small" onClick={this.toggleChecked}> {!this.state.checked ? 'Check' : 'Uncheck'} </Button> <Button style={{ marginLeft: '10px' }} type="primary" size="small" onClick={this.toggleDisable} > {!this.state.disabled ? 'Disable' : 'Enable'} </Button> </p> </div> ); } }

import React, { useState } from 'react'; import { Checkbox, CheckboxGroup } from '@douyinfe/semi-ui'; () => { const plainOptions = ['Photography', 'Movies', 'Running']; const [checkedList, setCheckedList] = useState(['Photography', 'Running']); const [indeterminate, setIndeterminate] = useState(true); const [checkAll, setCheckall] = useState(false); const onChange = (checkedList) => { setCheckedList(checkedList); setIndeterminate(!!checkedList.length && checkedList.length < plainOptions.length); setCheckall(checkedList.length === plainOptions.length); }; const onCheckAllChange = (e) => { console.log(e); setCheckedList(e.target.checked ? plainOptions : []); setIndeterminate(false); setCheckall(e.target.checked); }; return ( <div> <div style={{ paddingBottom: 8, borderBottom: '1px solid var(--semi-color-border)' }}> <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll} aria-label="Checkbox demo" > Check all </Checkbox> </div> <CheckboxGroup style={{ marginTop: 6 }} options={plainOptions} value={checkedList} onChange={onChange} aria-label="CheckboxGroup demo" /> </div> ); };

import React from 'react'; import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui'; () => ( <CheckboxGroup type='card' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo"> <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width: 280 }}> Checkbox Title </Checkbox> <Checkbox value={'2'} disabled extra='Checkbox Description' style={{ width: 280 }}> Checkbox Title </Checkbox> <Checkbox value={'3'} extra='Checkbox Description' style={{ width: 280 }}> Checkbox Title </Checkbox> <Checkbox value={'4'} extra='Checkbox Description' style={{ width: 280 }}> Checkbox Title </Checkbox> </CheckboxGroup> );

import React from 'react'; import { CheckboxGroup, Checkbox } from '@douyinfe/semi-ui'; () => ( <CheckboxGroup type='pureCard' defaultValue={['1', '3']} direction='vertical' aria-label="Checkbox demo"> <Checkbox value={'1'} disabled extra='Checkbox Description' style={{ width: 280 }}> Checkbox Title </Checkbox> <Checkbox value={'2'} disabled extra='Checkbox Description' style={{ width: 280 }}> Checkbox Title </Checkbox> <Checkbox value={'3'} extra='Checkbox Description' style={{ width: 280 }}> Checkbox Title </Checkbox> <Checkbox value={'4'} extra='Checkbox Description' style={{ width: 280 }}> Checkbox Title </Checkbox> </CheckboxGroup> );

import React from 'react'; import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui'; () => ( <CheckboxGroup style={{ width: '100%' }} aria-label="Checkbox demo"> <Row> <Col span={8}> <Checkbox value="A">A</Checkbox> </Col> <Col span={8}> <Checkbox value="B">B</Checkbox> </Col> <Col span={8}> <Checkbox value="C">C</Checkbox> </Col> <Col span={8}> <Checkbox value="D">D</Checkbox> </Col> <Col span={8}> <Checkbox value="E">E</Checkbox> </Col> </Row> </CheckboxGroup> );