Checkbox 复选框

使用场景

在一组可选项中进行多项选择时。

示例

基本示例

订阅订阅订阅订阅（受控）订阅（受控）订阅（禁用）

inline

() => ( <Group> <Checkbox onChange={console.log}>订阅</Checkbox> <Checkbox defaultChecked onChange={console.log}> 订阅 </Checkbox> <Checkbox defaultIndeterminate onChange={console.log}> 订阅 </Checkbox> <Checkbox checked>订阅（受控）</Checkbox> <Checkbox indeterminate>订阅（受控）</Checkbox> <Checkbox disabled>订阅（禁用）</Checkbox> </Group> )

() => (
  <Group>
    <Checkbox onChange={console.log}>订阅</Checkbox>
    <Checkbox defaultChecked onChange={console.log}>
      订阅
    </Checkbox>
    <Checkbox defaultIndeterminate onChange={console.log}>
      订阅
    </Checkbox>
    <Checkbox checked>订阅（受控）</Checkbox>
    <Checkbox indeterminate>订阅（受控）</Checkbox>
    <Checkbox disabled>订阅（禁用）</Checkbox>
  </Group>
)

受控

订阅（非受控）订阅（受控）

inline

() => { const [checked, setChecked] = useState(); return ( <Group> <Checkbox defaultChecked>订阅（非受控）</Checkbox> <Checkbox checked={checked} onChange={(val) => setChecked(checked)}> 订阅（受控） </Checkbox> </Group> ); }

() => {
  const [checked, setChecked] = useState();

  return (
    <Group>
      <Checkbox defaultChecked>订阅（非受控）</Checkbox>
      <Checkbox checked={checked} onChange={(val) => setChecked(checked)}>
        订阅（受控）
      </Checkbox>
    </Group>
  );
}

组合

水平

客服店长师傅

垂直

客服店长师傅

noInline

const dataSource = [ { label: '客服', value: '01' }, { label: '店长', value: '02' }, { label: '师傅', value: '03' }, ]; const GroupDemo = () => { return ( <Group> <h3>水平</h3> <CheckboxGroup dataSource={dataSource} defaultValue={['01']} onChange={console.log} /> <br /> <h3>垂直</h3> <CheckboxGroup direction="column" dataSource={dataSource} defaultValue={['01']} onChange={console.log} /> </Group> ); }; render(<GroupDemo />)

const dataSource = [
  { label: '客服', value: '01' },
  { label: '店长', value: '02' },
  { label: '师傅', value: '03' },
];

const GroupDemo = () => {
  return (
    <Group>
      <h3>水平</h3>
      <CheckboxGroup dataSource={dataSource} defaultValue={['01']} onChange={console.log} />
      <br />
      <h3>垂直</h3>
      <CheckboxGroup direction="column" dataSource={dataSource} defaultValue={['01']} onChange={console.log} />
    </Group>
  );
};

render(<GroupDemo />)

组合受控

客服店长师傅

noInline

const dataSource = [ { label: '客服', value: '01' }, { label: '店长', value: '02' }, { label: '师傅', value: '03' }, ]; const ControlledGroup = () => { const [val, setVal] = useState(null); return <CheckboxGroup dataSource={dataSource} value={val} onChange={(val) => setVal(val)} />; }; render(<ControlledGroup />)

const dataSource = [
  { label: '客服', value: '01' },
  { label: '店长', value: '02' },
  { label: '师傅', value: '03' },
];

const ControlledGroup = () => {
  const [val, setVal] = useState(null);
  return <CheckboxGroup dataSource={dataSource} value={val} onChange={(val) => setVal(val)} />;
};

render(<ControlledGroup />)

API

Checkbox

字段	描述
readOnly	boolean 是否只读
checked	boolean 受控选中态
defaultChecked	boolean 非受控选中初始态
indeterminate	boolean 受控半选态
defaultIndeterminate	boolean 非受控半选初始态
onChange	FormControlOnChangeHandler<boolean> 选中状态变化时的回调
disabled	boolean
name	string 所属分组
value	string 分组中的值
size	"small" | "medium" | "large" 尺寸
style	CSSProperties
className	string

CheckboxGroup

字段	描述
name	string 分组名，用于当页面存在多个 Group 时进行区分
dataSource	ListNode<string>[] 数据源
direction	"column" | "row" 元素排列方向，水平/垂直
className	string 自定义样式名
value	string[]
defaultValue	string[]
onChange	FormControlOnChangeHandler<string[]>