# components/ToggleCard (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/ToggleCard.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/ToggleCard.tsx).

## Components

### `ToggleCard`

Component.

Renders a switch with a title, badges, a description and a status, and its nested dependent
toggles under it.

```ts
function ToggleCard(props: ToggleCardProps): Element
```

**Parameters**

- `props` (`ToggleCardProps`): Component props.

**Returns** `Element`

**Props**

- `badges?` (`ReactNode`): Marks after the title, such as "Experimental".
- `checked` (`boolean`): Whether the toggle is on.
- `children?` (`ReactNode`): Nested dependent toggles, as `nested` cards.
- `className?` (`string`): Extra classes on the card.
- `description?` (`ReactNode`): One or two lines under the title.
- `disabled?` (`boolean`): The toggle cannot change, such as a dependent toggle whose requirement is off.
- `icon?` (`string`): Icon class (`i-ph-*`) before the title.
- `lead?` (`ReactNode`): A visual before the title, such as a `BrandMark`. Takes the place of `icon`.
- `media?` (`ReactNode`): An illustration, such as a small demo: beside the text on a card 600px wide or more, across its top below that. It is decorative: assistive tech skips it, and it must hold nothing to click.
- `nested?` (`boolean`): A dependent toggle inside its parent card: a smaller row.
- `onChange` (`(checked: boolean) => void`): Called with the new state when the card is clicked.
- `status?` (`ReactNode`): Shown before the switch: progress, "Installed", a reason.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title` (`ReactNode`): The card's title.

Source: [ui/src/components/ToggleCard.tsx:52](https://github.com/Tahul/zidane/blob/main/ui/src/components/ToggleCard.tsx#L52)

## Interfaces

### `ToggleCardProps`

Interface.

Props for [`ToggleCard`](https://zidane.si/docs/reference/ui-components-toggle-card.md#ToggleCard).

```ts
interface ToggleCardProps
```

**Properties**

- `badges?` (`ReactNode`): Marks after the title, such as "Experimental".
- `checked` (`boolean`): Whether the toggle is on.
- `children?` (`ReactNode`): Nested dependent toggles, as `nested` cards.
- `className?` (`string`): Extra classes on the card.
- `description?` (`ReactNode`): One or two lines under the title.
- `disabled?` (`boolean`): The toggle cannot change, such as a dependent toggle whose requirement is off.
- `icon?` (`string`): Icon class (`i-ph-*`) before the title.
- `lead?` (`ReactNode`): A visual before the title, such as a `BrandMark`. Takes the place of `icon`.
- `media?` (`ReactNode`): An illustration, such as a small demo: beside the text on a card 600px wide or more, across its top below that. It is decorative: assistive tech skips it, and it must hold nothing to click.
- `nested?` (`boolean`): A dependent toggle inside its parent card: a smaller row.
- `onChange` (`(checked: boolean) => void`): Called with the new state when the card is clicked.
- `status?` (`ReactNode`): Shown before the switch: progress, "Installed", a reason.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title` (`ReactNode`): The card's title.

Source: [ui/src/components/ToggleCard.tsx:15](https://github.com/Tahul/zidane/blob/main/ui/src/components/ToggleCard.tsx#L15)