> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# SwitchComponent

A React component that accepts `SwitchComponentProps` as props.

```ts theme={null}
export type SwitchComponent = React.Component<SwitchComponentProps>;
```

## `SwitchComponentProps`

```ts theme={null}
export interface SwitchComponentProps {
  ariaLabelledBy?: string;
  isChecked?: boolean;
  isDisabled?: boolean;
  isInvalid?: boolean;
  onCheckedChange?: (isChecked: boolean) => void;
  ref?: React.Ref<any>;
}
```

<ParamField path="ariaLabelledBy" type="string" optional>
  The `id` of an external element that labels this switch, if a label exists. Pass this as the `aria-labelledby`
  attribute on your root element to satisfy accessibility requirements when a visible label exists in the DOM.
</ParamField>

<ParamField path="isChecked" type="boolean" optional>
  Whether the switch should be rendered in the on (checked) state.
</ParamField>

<ParamField path="isDisabled" type="boolean" optional>
  When `true`, the switch is non-interactive and should be rendered in a visually disabled state.
</ParamField>

<ParamField path="isInvalid" type="boolean" optional>
  When `true`, the switch is in an error state.
</ParamField>

<ParamField path="onCheckedChange" type="(isChecked: boolean) => void" optional>
  Callback that should be invoked with the new `isChecked` value when the user toggles the switch.
</ParamField>

<ParamField path="ref" type="React.Ref<any>" optional>
  A React ref that should be forwarded to the underlying DOM element.
</ParamField>