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

website/sdds-cs-docs/docs/components/Checkbox.mdx

57 строк2 KB

Ilya

feat(*): add docs checkbox with indeterminate

02 апр 2025, 14:24

02 апр 2025, 14:240bf90dd

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

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

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

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

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

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

Свойства `description` и `label` могут принимать JSX элементы.

По умолчанию, контент внутри лейбла и описания многострочный. 

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

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

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/sdds-cs';

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