V99CheckBox¶

Display a CheckBox. * A component that allows the user to select multiple options from a list.

I. Props¶

Name	Type	Default	Description
value	boolean \| null	false	The value number of the checkbox. Value false is unchecked, value true is checked, value null is indeterminate.
type	'square' \| 'circle'	'square'	The type of the checkbox: square or circle
indeterminate	boolean	-	The display state of the checkbox. If true, show checkbox with indeterminate status.
disabled	boolean	-	If true the user won't be able to toggle the checkbox. Default value is false.
onValueChange	(value: boolean) => void	-	Invoked with the new boolean value when it changes.

Lưu ý: Indeterminate là trạng thái hỗn hợp (bao gồm trạng thái checked và unchecked). Trạng thái indeterminate luôn phải có các lựa chọn con đi kèm.

II. Usage¶

import { V99CheckBox } from 'v99-kits'

1. CheckBox square¶

Example¶

<V99Box padding={V99Spacing.M}>
  <V99CheckBox
    value={value}
    onValueChange={value => onChanged(value)}
  />

  <V99Box marginTop={20} />
  <V99CheckBox
    value={value}
    onValueChange={value => onChanged(value)}
    disabled
  />
</V99Box>

Demo¶

Demo

2. CheckBox circle¶

Example¶

<V99Box padding={V99Spacing.M}>
  <V99CheckBox
    value={value}
    onValueChange={value => onChanged(value)}
    type={'circle'}
  />

  <V99Box marginTop={V99Spacing.s20} />
  <V99CheckBox
    value={state.check}
    onValueChange={value => onChanged(value)}
    type={'circle'}
    indeterminate
    disabled
  />
</V99Box>

Demo¶

Demo1

3. CheckBox indeterminate¶

Example¶

<V99Box padding={V99Spacing.M}>
  <V99CheckBox
    value={value}
    onValueChange={value => onChanged(value)}
    indeterminate
  />
</V99Box>

Demo¶

Demo2

4. CheckBox circle indeterminate¶

Example¶

<V99Box padding={V99Spacing.M}>
  <V99CheckBox
    value={value}
    onValueChange={value => onChanged(value)}
    type={'circle'}
    indeterminate
  />

  <V99Box marginTop={V99Spacing.s20} />
  <V99CheckBox
    value={value}
    onValueChange={value => onChanged(value)}
    type={'circle'}
    indeterminate
    disabled
  />
</V99Box>

Demo¶

Demo3