Checkbox#

Чекбокс используется для включения или выключения нескольких опций.

import { Checkbox } from '@v-uik/checkbox'
import { CheckboxGroup } from '@v-uik/checkbox-group'

Checkbox API#

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации. `Partial<Record<"input" / "checkbox" / "control" / "checked" / "disabled" / "indeterminate" / "checkboxIcon", string>>`	-
2	checked	Элемент выбран (boolean)	-
3	disabled	Элемент отключен (boolean)	-
4	indeterminate	Неопределенное состояние чекбокса (boolean)	-
5	name	Атрибут name элемента input (string)	-
6	onChange	Обработчик, вызываемый при изменении состояния `((event: ChangeEvent<HTMLInputElement>) => void)`	-
7	inputProps	Свойства элемента input `InputHTMLAttributes<HTMLInputElement>`	-

CheckboxGroup API#

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации. `Partial<Record<"disabled" / "vertical" / "error" / "container" / "checkboxGroup", string>>`	-
2	label	Подпись над полем ввода (ReactNode)	-
3	labelProps	Свойства компонента InputLabel (InputLabelProps)	-
4	direction	Направление расположения элементов: horizontal, vertical	horizontal
5	value	Значение поля (string[])	[]
6	onChange	Обработчик изменения состояния `((event: ChangeEvent<HTMLInputElement>, value?: string[]) => void)`	-
7	helperText	Подпись под полем ввода (ReactNode)	-
8	helperTextProps	Свойства компонента InputHelperText (InputHelperTextProps)	-
9	disabled	boolean	-
10	error	boolean	-

Чекбокс с ярлыком#

import * as React from 'react'
import { Checkbox } from '@v-uik/checkbox'
import { LabelControl } from '@v-uik/label-control'

export interface WithLabelProps {
  initChecked?: boolean
}

export const WithLabel = ({
  initChecked = false,
}: WithLabelProps): JSX.Element => {
  const [checked, setChecked] = React.useState(initChecked)

  const handleChangeChecked = () => {
    setChecked(!checked)
  }

  return (
    <LabelControl
      control={<Checkbox />}
      checked={checked}
      label="Quis fugiat proident exercitation magna anim cupidatat eu irure proidentamet."
      onChange={handleChangeChecked}
    />
  )
}

Вертикальный список чекбоксов#

import * as React from 'react'
import { CheckboxGroup } from '@v-uik/checkbox-group'
import { Checkbox } from '@v-uik/checkbox'
import { LabelControl } from '@v-uik/label-control'

export const CheckboxGroupVertical = (): JSX.Element => {
  const [value, setValue] = React.useState<string[]>([])

  const onChange = (
    event: React.ChangeEvent<HTMLInputElement>,
    value: string[] | undefined
  ) => {
    setValue(value ?? [])
  }

  return (
    <CheckboxGroup
      label="Расположение"
      value={value}
      direction="vertical"
      onChange={onChange}
    >
      <LabelControl
        name="debt"
        control={<Checkbox />}
        label="Дебетовая карта"
      />
      <LabelControl
        name="credit"
        control={<Checkbox />}
        label="Кредитная карта"
      />
      <LabelControl name="cash" control={<Checkbox />} label="Наличные" />
    </CheckboxGroup>
  )
}

Неопределенное состояние#

Эта опция включает режим отображения, при котором не все элементы внутри группы выбраны.

import * as React from 'react'
import { Checkbox } from '@v-uik/checkbox'
import { CheckboxGroup } from '@v-uik/checkbox-group'
import { LabelControl } from '@v-uik/label-control'

interface Props {
  initPayments?: string[]
}

export const Indeterminate = ({ initPayments = [] }: Props): JSX.Element => {
  const payments = React.useMemo(() => ['debt', 'credit', 'cash'], [])
  const [activePayments, setActivePayments] =
    React.useState<typeof payments>(initPayments)

  const handleChangeGroup = React.useCallback(
    (
      event: React.ChangeEvent<HTMLInputElement>,
      value: string[] | undefined
    ) => {
      setActivePayments(value ?? [])
    },
    []
  )

  const rootChecked = activePayments.length === payments.length
  const indeterminate =
    !!activePayments.length && activePayments.length < payments.length

  const handleChangeRoot = React.useCallback(() => {
    if (rootChecked) {
      setActivePayments([])
    } else {
      setActivePayments(payments)
    }
  }, [payments, rootChecked])

  return (
    <>
      <LabelControl
        style={{ marginBottom: 8 }}
        checked={rootChecked}
        control={<Checkbox indeterminate={indeterminate} />}
        label="Способ оплаты"
        onChange={handleChangeRoot}
      />

      <div style={{ marginLeft: '25px' }}>
        <CheckboxGroup
          value={activePayments}
          direction="vertical"
          onChange={handleChangeGroup}
        >
          <LabelControl
            name="debt"
            control={<Checkbox />}
            label="Дебетовая карта"
          />
          <LabelControl
            name="credit"
            control={<Checkbox />}
            label="Кредитная карта"
          />
          <LabelControl name="cash" control={<Checkbox />} label="Наличные" />
        </CheckboxGroup>
      </div>
    </>
  )
}

Местоположение метки относительно чекбокса#

Метка может располагаться относительно чекбокса в начале, сверху, снизу или в конце.

import * as React from 'react'
import { CheckboxGroup } from '@v-uik/checkbox-group'
import { Checkbox } from '@v-uik/checkbox'
import { LabelControl } from '@v-uik/label-control'

export const LabelPosition = (): JSX.Element => {
  const [value, setValue] = React.useState<string[]>([])

  const onChange = (
    event: React.ChangeEvent<HTMLInputElement>,
    value: string[] | undefined
  ) => {
    setValue(value ?? [])
  }

  return (
    <CheckboxGroup
      label="Расположение"
      value={value}
      direction="horizontal"
      onChange={onChange}
    >
      <LabelControl
        name="start"
        control={<Checkbox />}
        label="В начале"
        labelPlacement="start"
      />
      <LabelControl
        name="top"
        control={<Checkbox />}
        label="Сверху"
        labelPlacement="top"
      />
      <LabelControl
        name="bottom"
        control={<Checkbox />}
        label="Снизу"
        labelPlacement="bottom"
      />
      <LabelControl
        name="end"
        control={<Checkbox />}
        label="В конце"
        labelPlacement="end"
      />
    </CheckboxGroup>
  )
}

Состояние disabled#

С компонентом в состоянии disabled взаимодействовать невозможно.

import * as React from 'react'
import { Checkbox } from '@v-uik/checkbox'
import { LabelControl } from '@v-uik/label-control'

export const Disabled = (): JSX.Element => {
  return (
    <>
      <LabelControl
        checked
        disabled
        label="Активен и Недоступен"
        control={<Checkbox />}
      />
      <LabelControl
        disabled
        label="Выключен и Недоступен"
        control={<Checkbox />}
      />
      <LabelControl
        disabled
        label="Неопределенное состояние и Недоступен"
        control={<Checkbox indeterminate />}
      />
    </>
  )
}