Checkbox 复选按钮

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

多选框

何时使用

复选框允许用户从一个数据集中选择多个选项。如果在一个列表中有多个选项，你可以通过使用复选框而不是开/关切换来节省空间。如果你有一个单选项，不要用复选框，使用开/关切换。

API

Checkbox

Checkbox.Group

ARIA and KeyBoard

代码示例

基本

使用 Checkbox 渲染的基本组件。

查看源码在线预览

import { Checkbox } from '@alifd/next';
ReactDOM.render(
    <div>
        <h6>Different status without label:</h6>
        <Checkbox >Unchecked</Checkbox>
        <Checkbox defaultChecked >DefaultChecked</Checkbox>
        <Checkbox defaultIndeterminate >Indeterminate</Checkbox>
        <Checkbox disabled >Disabled</Checkbox>;
        <Checkbox disabled checked >Checked-Disabled</Checkbox>
        <Checkbox checked >Checked</Checkbox>
        <h6>Using with label</h6>
        <Checkbox>Banana</Checkbox>&nbsp;
        <Checkbox id="apple" /><label htmlFor="apple" className="next-checkbox-label">Apple</label>&nbsp;
        <label>
            <Checkbox id="pear" />
            <span className="next-checkbox-label">Pear</span>
        </label>&nbsp;
        <Checkbox label="Banana" />
    </div>, mountNode);

分组

使用 <Checkbox.Group> 渲染 <Checkbox> 分组。

查看源码在线预览

import { Checkbox } from '@alifd/next';
const CheckboxGroup = () => (
    <div>
        <h4>Horizonal direction</h4>
        <p>
            <Checkbox.Group itemDirection="hoz">
                <Checkbox value="react">React</Checkbox>
                <Checkbox value="vue">Vue</Checkbox>
                <Checkbox value="angular">Angular</Checkbox>
            </Checkbox.Group>
        </p>
        <h4>Vertical direction</h4>
        <p>
            <Checkbox.Group itemDirection="ver">
                <Checkbox value="react">React</Checkbox>
                <Checkbox value="vue">Vue</Checkbox>
                <Checkbox value="angular">Angular</Checkbox>
            </Checkbox.Group>
        </p>
    </div>
);
ReactDOM.render(<CheckboxGroup />, mountNode);

中间状态组件

通过使用 indeterminate 来渲染中间状态的组件。

查看源码在线预览

import { Checkbox, Button } from '@alifd/next';
class IndeterminateApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false,
            indeterminate: true,
            disabled: false
        };
    }
    render() {
        return (
            <div>
                <Checkbox
                    checked={this.state.checked}
                    indeterminate={this.state.indeterminate}
                    disabled={this.state.disabled}
                    onChange={
                        (checked) => {
                            this.setState({checked: checked, indeterminate: false});
                        }
                    }
                />
                <br />
                <br />
                <Button
                    type="primary"
                    onClick={
                        () => {
                            this.setState({checked: true, indeterminate: false});
                        }
                    }>checked = true</Button>
                <br />
                <br />
                <Button
                    type="primary"
                    onClick={
                        () => {
                            this.setState({checked: false});
                        }
                    }
                >checked = false</Button>
                <br />
                <br />
                <Button
                    type="primary"
                    onClick={
                        () => {
                            this.setState({checked: false, indeterminate: true});
                        }
                    }
                >indeterminate = true</Button>
                <br />
                <br />
                <Button
                    type="primary"
                    onClick={
                        () => {
                            this.setState({indeterminate: false});
                        }
                    }
                >indeterminate = false</Button>
                <br />
                <br />
                <Button
                    type="primary"
                    onClick={
                        () => {
                            this.setState({disabled: !this.state.disabled});
                        }
                    }
                >toggle disabled</Button>
            </div>
        );
    }
}
ReactDOM.render(<IndeterminateApp />, mountNode);

受限组件

使用 CheckboxGroup 渲染的组，通过设置 value 属性可以让组件变成受限组件。

查看源码在线预览

import { Checkbox } from '@alifd/next';
const { Group: CheckboxGroup } = Checkbox;
const list = [
    {
        value: 'apple',
        label: 'Apple'
    }, {
        value: 'pear',
        label: 'Pear'
    }, {
        value: 'orange',
        label: 'Orange'
    }
];
class ControlApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ['orange']
        };
        this.onChange = this.onChange.bind(this);
    }
    onChange(selectedItems) {
        console.log('onChange callback', selectedItems);
        this.setState({
            value: selectedItems
        });
    }
    render() {
        return (
            <div style={{padding: '20px'}}>
                <CheckboxGroup value={this.state.value} dataSource={list} onChange={this.onChange} />
            </div>
        );
    }
}
ReactDOM.render(<ControlApp />, mountNode);

非受限组件

使用 CheckboxGroup 渲染的组，通过设置 defaultValue 属性可以让组件变成非受限组件。

查看源码在线预览

import { Checkbox } from '@alifd/next';
const { Group: CheckboxGroup } = Checkbox;
const list = [
    {
        value: 'apple',
        label: 'Apple',
        disabled: false
    }, {
        value: 'pear',
        label: 'Pear'
    }, {
        value: 'orange',
        label: 'Orange',
        disabled: true
    }
];
class UnControlApp extends React.Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
    }
    onChange(selectedItems) {
        console.log('onChange callback', selectedItems);
    }
    render() {
        return (
            <div style={{padding: '20px'}}>
                <CheckboxGroup defaultValue={['apple']} dataSource={list} onChange={this.onChange} />
            </div>
        );
    }
}
ReactDOM.render(<UnControlApp />, mountNode);

Checkbox嵌套使用

使用 CheckboxGroup，通过直接嵌套 Checkbox 组件来渲染的组。

查看源码在线预览

import { Checkbox } from '@alifd/next';
const { Group: CheckboxGroup } = Checkbox;
class NestApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ['orange']
        };
        this.onChange = this.onChange.bind(this);
    }
    onChange(selectedItems) {
        this.setState({
            value: selectedItems
        });
    }
    render() {
        return (
            <div>
                <CheckboxGroup value={this.state.value} onChange={this.onChange}>
                    <Checkbox id="apple" value="apple" disabled>Apple</Checkbox>
                    <Checkbox id="watermelon" value="watermelon">Watermelon</Checkbox>
                    <Checkbox id="orange" value="orange">Orange</Checkbox>
                </CheckboxGroup>
            </div>
        );
    }
}
ReactDOM.render(<NestApp />, mountNode);

无障碍

通过aria-label对Checkbox组件进行描述。关于键盘操作请参考ARIA and KeyBoard。

查看源码在线预览

import { Checkbox } from '@alifd/next';
const CheckboxGroup = () => (
    <div>
        <h4>Programming language：</h4>
        <Checkbox.Group aria-label="Please select a programming language">  
            <Checkbox value="python">python</Checkbox>
            <Checkbox value="java">java</Checkbox>
            <Checkbox value="angular">angular</Checkbox>
            <Checkbox value="c">c</Checkbox>
            <Checkbox value="other">other</Checkbox>
        </Checkbox.Group>
    </div>
);
ReactDOM.render(<CheckboxGroup />, mountNode);

相关区块

暂无相关区块