Checkbox

一组备选项中进行多选

基本用法

function App() {
  return (
    <div className="ykui-demo-row">
      <Checkbox onChange={(val) => console.log(val)}>normal</Checkbox>
      <Checkbox checked onChange={(val) => console.log(val)}>checked</Checkbox>
      <Checkbox disabled>disabled</Checkbox>
    </div>
  )
}

Checkbox Group

function App() {
  const [value, setValue] = useState(["man"]);

  return (
    <div className="ykui-demo-row">
      <Checkbox.Group
        value={value}
        onChange={(val) => console.log(val)}
      >
        <Checkbox label="👨🏻" value="man" />
        <Checkbox label="👩🏻" value="women" />
      </Checkbox.Group>
    </div>
  )
}

自定义数据

function App() {
  const [value, setValue] = useState(["man"]);

  return (
    <div className="ykui-demo-column">
      <Checkbox.Group>
        <div className="kf-ai-input-wrapper">
          <Checkbox value="语音服务1">语音服务1</Checkbox>
        </div>
        <div className="kf-ai-input-wrapper">
          <Checkbox value="在线服务1">在线服务1</Checkbox>
        </div>
        <div className="kf-ai-input-wrapper">
          <Checkbox value="工单中心1">工单中心1</Checkbox>
        </div>
      </Checkbox.Group>

      <Checkbox.Group
        data={[
          { label: "apple", value: 1 },
          { label: "orange", value: 2 },
          { label: "Banana", value: 3 },
          { label: "Cherry", value: 4 },
        ]}
      />
    </div>
  )
}

Checkbox API

属性	说明	类型	默认值
children	内容	ReactNode	--
inputClassName	input 类名	string	--
style	样式	CSSProperties	--
name	name 属性	string	--
checked	是否选中	boolean	--
disabled	是否禁用	boolean	--
label	checkbox 的文字	string	--
value	选中值	any	--
onChange	值改变时触发	Func	--

CheckboxGroup API

属性	说明	类型	默认值
children	内容	ReactNode	--
ClassName	类名	string	--
style	样式	CSSProperties	--
type	类型	radio〡checkbox	--
name	name 属性	string	--
value	选中值	GroupValueTypes	--
data	数据	DataTypes	--
onChange	值改变时触发	Func	--