# Switch Field

A switch laid out as a field row with label, description, and hint or error text.

## Installation

```tsx
import { SwitchField } from "@makeplane/propel/components/switch-field";
```
## Usage

```tsx
import { SwitchField } from "@makeplane/propel/components/switch-field";

export default function BasicDemo() {
  return (
    <SwitchField
      name="restartOnFailure"
      label="Restart on failure"
      switchSize="md"
      size="lg"
      description="Automatically restart the service after a crash."
      hint="You can change this later."
      defaultChecked
    />
  );
}
```
## Examples

### Sizes

`switchSize` (`sm`, `md`, `lg`) sizes the switch track; `size` (`lg`, `xl`, `2xl`) sizes the label and helper text independently — set them together for the common case.

```tsx
import { SwitchField } from "@makeplane/propel/components/switch-field";

export default function SizesDemo() {
  return (
    <div className="flex flex-col items-start gap-3">
      <SwitchField
        name="autoArchiveSm"
        label="Auto-archive done items"
        switchSize="sm"
        size="lg"
        defaultChecked
      />
      <SwitchField
        name="autoArchiveMd"
        label="Auto-archive done items"
        switchSize="md"
        size="lg"
        defaultChecked
      />
      <SwitchField
        name="autoArchiveLg"
        label="Auto-archive done items"
        switchSize="lg"
        size="xl"
        defaultChecked
      />
    </div>
  );
}
```

### Disabled

```tsx
import { SwitchField } from "@makeplane/propel/components/switch-field";

export default function DisabledDemo() {
  return (
    <div className="flex flex-col items-start gap-3">
      <SwitchField
        name="ssoEnforced"
        label="Enforce single sign-on"
        description="Managed by your identity provider."
        switchSize="md"
        size="lg"
        defaultChecked
        disabled
      />
      <SwitchField
        name="legacyApi"
        label="Allow legacy API tokens"
        description="Disabled for this workspace plan."
        switchSize="md"
        size="lg"
        disabled
      />
    </div>
  );
}
```

### Error

Passing `error` marks the field invalid, replaces the hint with the error text, and — while the switch is off — outlines the track with a danger ring, the same treatment `Checkbox` uses.

```tsx
import { SwitchField } from "@makeplane/propel/components/switch-field";

export default function ErrorDemo() {
  return (
    <SwitchField
      name="requireTwoFactor"
      label="Require two-factor authentication"
      description="Every member must enable 2FA before joining."
      switchSize="md"
      size="lg"
      error="Enable 2FA on your own account before enforcing it for the workspace."
    />
  );
}
```

### Controlled

```tsx
import { SwitchField } from "@makeplane/propel/components/switch-field";
import * as React from "react";

export default function ControlledDemo() {
  const [checked, setChecked] = React.useState(false);

  return (
    <SwitchField
      name="weeklyDigest"
      label="Weekly project digest"
      description="A Monday summary of activity across your projects."
      switchSize="md"
      size="lg"
      checked={checked}
      onCheckedChange={setChecked}
      hint={checked ? "You will receive the digest every Monday." : "Digest emails are paused."}
    />
  );
}
```
## API Reference

### SwitchField

Ready-to-use switch field with label, description, and helper/error text.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `switchSize` (required) | `"lg" \| "md" \| "sm"` | — | The switch track's size. |
| `size` (required) | `"lg" \| "md" \| "xl" \| "2xl"` | — | Label and helper text size. |
| `label` (required) | `string` | — | Visible field label. |
| `render` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SwitchRootState>` | — | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| `hint` | `ReactNode` | — | Helper text shown below the control. Replaced by `error` when an error is set. |
| `error` | `ReactNode` | — | Error text shown below the control. |
| `description` | `ReactNode` | — | Optional supporting text announced as the switch description. |