{
  "id": "uilib/components/switch",
  "name": "Switch",
  "description": "The Switch component (toggle) is a digital on/off switch.",
  "group": "components",
  "slug": "/uilib/components/switch/",
  "props": [
    {
      "name": "checked",
      "doc": "Determine whether the switch is checked or not. The default will be `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "title",
      "doc": "The `title` of the input - describing it a bit further for accessibility reasons.",
      "type": "string",
      "status": "required",
      "defaultValue": null
    },
    {
      "name": "label",
      "doc": "Use either the `label` property or provide a custom one.",
      "type": "ReactNode",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "labelPosition",
      "doc": "Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.",
      "type": [
        "left",
        "right"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "labelSrOnly",
      "doc": "Use `true` to make the label only readable by screen readers.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "size",
      "doc": "The size of the switch. For now there is **medium** (default) and **large**.",
      "type": [
        "default",
        "medium",
        "large"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status",
      "doc": "Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.",
      "type": [
        "error",
        "info",
        "boolean"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "statusState",
      "doc": "Defines the state of the status. Defaults to `error`.",
      "type": [
        "error",
        "warn",
        "info",
        "success",
        "marketing"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "statusProps",
      "doc": "Use an object to define additional [FormStatus](/uilib/components/form-status/properties/) properties.",
      "type": "FormStatus",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "globalStatus",
      "doc": "The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status).",
      "type": "GlobalStatus",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "suffix",
      "doc": "Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component.",
      "type": "ReactNode",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "skeleton",
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "innerRef",
      "doc": "By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.",
      "type": "React.RefObject",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [
    {
      "name": "onChange",
      "doc": "Will be called on state changes made by the user.",
      "type": "({ checked: boolean; event: ChangeEvent }) => void",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "onChangeEnd",
      "doc": "Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean { checked, event }.",
      "type": "({ checked: boolean; event: ChangeEvent }) => void",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "onClick",
      "doc": "Will be called on click.",
      "type": "({ checked: boolean; event: MouseEvent, preventDefault: () => void }) => void",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "related": [
    "Space"
  ],
  "checksum": "cd92e015985439b6d328b7db4a27ffc89fabcf82f47139599e801d9c1dec0eb0",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/switch/Switch.tsx",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/switch/Switch.tsx"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/switch.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/switch/"
    },
    "props": {
      "local": "src/docs/uilib/components/switch/properties.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/switch/properties/"
    },
    "events": {
      "local": "src/docs/uilib/components/switch/events.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/switch/events/"
    },
    "demos": {
      "local": "src/docs/uilib/components/switch/demos.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/switch/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T11:12:44.351Z",
  "schemaVersion": 1
}