website/plasma-web-docs/docs/components/Checkbox.mdx - dev - sdds/plasma

website/plasma-web-docs/docs/components/Checkbox.mdx

60 строк2 KB

Ilya

feat(*): add docs checkbox with indeterminate

02 апр 2025, 14:24

02 апр 2025, 14:240bf90dd

---
id: checkbox
title: Checkbox
---

import { PropsTable, Description, StorybookLink } from '@site/src/components';

# Checkbox
<Description name="Checkbox" />
<PropsTable name="Checkbox" exclude={['css', 'focused']} include={['defaultChecked']} />

:::caution Устаревшие значения для свойства view
Актуальным значением для свойства `view` - является `accent`. 

Все остальные значения `deprecated` и будут удалены в ближайшее время! 
:::

## Использование
Компонент `Checkbox` может содержать лейбл и описание.

```tsx live
import React from 'react';
import { Checkbox } from '@salutejs/plasma-web';

export function App() {
    return (
        <Checkbox label="Чекбокс" description="Описание" defaultChecked />
    );
}
```

Свойства `description` и `label` могут принимать JSX элементы.
По умолчанию, контент внутри лейбла и описания многострочный. Для того, чтобы стал однострочным, необходимо использовать свойство `singleLine`(по умолчанию `false`).

```tsx live
import React from 'react';
import { Checkbox } from '@salutejs/plasma-web';

export function App() {
    return (
        <Checkbox 
            label={<div>Чекбокс со <a href="/#">ссылкой</a></div>} 
            description={<div>Описание чекбокса со <a href="/#">ссылкой</a></div>}  
        />
    );
}
```

Состояние `indeterminate` имеет приоритет и не зависит от свойства `checked`

```tsx live
import React from 'react';
import { Checkbox } from '@salutejs/plasma-web';

export function App() {
    return (
        <Checkbox label="Чекбокс" description="Описание" defaultChecked indeterminate checked={false} />
    );
}
```