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

# SwitchField

> Toggle a labeled boolean setting with validation feedback

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`SwitchField` presents a controlled React Native switch inside a labeled field.

<LocalUiPlayground component="switch-field" title="Interactive SwitchField example" />

## Usage

```tsx theme={null}
import { useState } from 'react';

import { SwitchField } from '@amisi-mobile-starter/ui';

export const NotificationSetting = () => {
  const [isEnabled, setIsEnabled] = useState(true);

  return (
    <SwitchField
      label="Push notifications"
      value={isEnabled}
      onValueChange={setIsEnabled}
      helperText="You can change this later."
    />
  );
};
```

## Props

| Prop            | Type                           | Default     | Description                                   |
| --------------- | ------------------------------ | ----------- | --------------------------------------------- |
| `label`         | `string`                       | Required    | Setting label.                                |
| `value`         | `boolean`                      | Required    | Controlled switch state.                      |
| `onValueChange` | `(nextValue: boolean) => void` | Required    | Runs when the native switch changes.          |
| `helperText`    | `string`                       | `undefined` | Supporting text shown when there is no error. |
| `error`         | `string`                       | `undefined` | Error shown instead of helper text.           |
| `style`         | `ViewProps['style']`           | `undefined` | Style applied to the outer wrapper.           |

The public type combines `ViewProps` with `SwitchProps` except `value` and `onValueChange`. Remaining props are passed to the native `Switch`. Its default track colors are `#737373` and `#2da8ff`; its default thumb color is `#ffffff`. Supplied native color props override them.