` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, ``). |
| disabled | `boolean \| null` | `false` | Whether the component should ignore user interaction. |
| render | `Snippet<[props: ToggleHostProps, state: ToggleState, children: Snippet \| undefined]>` | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a snippet that receives the props to spread onto the element, the component's state, and the children to render. |
**Toggle Data Attributes:**
| Attribute | Type | Description |
| :------------ | :--- | :------------------------------------------ |
| data-pressed | - | Present when the toggle button is pressed. |
| data-disabled | - | Present when the toggle button is disabled. |
### Toggle.Props
Re-export of [Toggle](/components/toggle.md) props.
### Toggle.State
```typescript
type ToggleState = {
/** Whether the toggle is currently pressed. */
pressed: boolean;
/** Whether the toggle should ignore user interaction. */
disabled: boolean;
};
```
## Additional Types
### ToggleChangeEventDetails
```typescript
type ToggleChangeEventDetails = {
reason: Reason;
event: Event;
cancel: () => void;
allowPropagation: () => void;
isCanceled: boolean;
isPropagationAllowed: boolean;
trigger: Element | undefined;
};
```
### ToggleChangeEventReason
```typescript
type ToggleChangeEventReason = typeof REASONS.none;
```
### ToggleDataAttributes
Data attributes of [Toggle](/components/toggle.md).
```typescript
declare namespace ToggleDataAttributes {
/** Present when the toggle button is pressed. */
const pressed: 'data-pressed';
/** Present when the toggle button is disabled. */
const disabled: 'data-disabled';
}
```
### ToggleHostProps
Props passed to a `render` snippet. Spread them onto the host element. Handlers are typed for a generic element so the same object spreads onto a `` or, with `nativeButton={false}`, a ``.
```typescript
type ToggleHostProps = {};
```