import { useEffect, useState } from 'react'
import { faMinus } from '@fortawesome/free-solid-svg-icons'
import Div from '../../Div'
import Br from '../../Br'
import Checkbox from '../Checkbox'
import { $root } from 'startupjs'
import { Sandbox } from '@startupjs/docs'

# Checkbox (чекбокс)

Чекбоксы позволяют пользователю выбрать один или несколько элементов из набора.

```jsx
import { Checkbox } from from '@startupjs/ui'
```

## Простой пример

```jsx example
const [checked, setChecked] = useState(false)

return (
  <Checkbox
    value={checked}
    onChange={setChecked}
  />
)
```

## Разновидности

Существует два вида отображения компонента: `checkbox` и `switch`. **Значение по умолчанию**: `checkbox`.

```jsx example
const [checked, setChecked] = useState(false)

return (
  <Div>
    <Checkbox
      value={checked}
      onChange={setChecked}
    />
    <Br />
    <Checkbox
      variant='switch'
      value={checked}
      onChange={setChecked}
    />
  </Div>
)
```

## Disabled

```jsx example
return (
  <Checkbox disabled />
)
```

## Readonly

```jsx example
return (
  <Checkbox readonly />
)
```

## Чекбокс со своей иконкой

Свойство `icon` позволяет заменить стандартную иконку.

```jsx example
const [checked, setChecked] = useState(false)

return (
  <Checkbox
    value={checked}
    icon={faMinus}
    onChange={setChecked}
  />
)
```

## Sandbox

<Sandbox
  Component={Checkbox}
  extraParams={{
    icon: {
      showIconSelect: true
    }
  }}
  props={{
    onChange: value => alert('New value is ' + value)
  }}
/>