{
  "id": "uilib/components/toggle-button",
  "name": "ToggleButton",
  "description": "The ToggleButton component should be used to toggle on or off a limited number of choices.",
  "group": "components",
  "slug": "/uilib/components/toggle-button/",
  "props": [
    {
      "name": "value",
      "doc": "Defines the pre-selected ToggleButton button. The value has to match the one provided in the ToggleButton button. Use a string value.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "text",
      "doc": "The text shown in the ToggleButton.",
      "type": "string",
      "status": "required",
      "defaultValue": null
    },
    {
      "name": "checked",
      "doc": "Determine whether the ToggleButton is checked or not. The default will be `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "title",
      "doc": "The `title` of group, describing it a bit further for accessibility reasons.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label",
      "doc": "Use either the `label` property or provide a custom one.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "icon",
      "doc": "Icon to be included in the toggle button.",
      "type": [
        "string",
        "React.ReactNode"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "icon_position",
      "doc": "Position of the icon inside the toggle button. Set to `left` or `right`. Defaults to `right` if not set.",
      "type": [
        "left",
        "right"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "icon_size",
      "doc": "Define icon width and height. Defaults to `16px`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "tooltip",
      "doc": "Provide a string or a React Element to be shown as the tooltip content.",
      "type": [
        "string",
        "React.ReactNode"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "size",
      "doc": "The size of the button. For now there is `small`, `medium`, `default` and `large`.",
      "type": [
        "small",
        "medium",
        "default",
        "large"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status",
      "doc": "Uses the `form-status` component to show failure messages.",
      "type": [
        "error",
        "info",
        "boolean"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status_state",
      "doc": "Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.",
      "type": [
        "error",
        "info"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "status_props",
      "doc": "Use an object to define additional FormStatus properties.",
      "type": "object",
      "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": "object",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "suffix",
      "doc": "Text describing the content of the ToggleButtonGroup more than the label. You can also send in a React component, so it gets wrapped inside the ToggleButtonGroup component.",
      "type": "string",
      "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": "values",
      "doc": "Defines the pre-selected ToggleButton buttons in `multiselect` mode. The values have to match the one provided in the ToggleButton buttons. Use array, either as JS or JSON string.",
      "type": "array",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "multiselect",
      "doc": "Defines if the ToggleButton's should act as a multi-selectable list of toggle buttons. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "layout_direction",
      "doc": "Define the layout direction of the ToggleButton buttons. Can be either `column` or `row`. Defaults to `column`.",
      "type": [
        "column",
        "row"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label_direction",
      "doc": "To define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.",
      "type": [
        "vertical",
        "horizontal"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "label_sr_only",
      "doc": "Use `true` to make the label only readable by screen readers.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "vertical",
      "doc": "Will force both `direction` and `label_direction` to be **vertical** if set to `true`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [
    {
      "name": "on_change",
      "doc": "will be called once a ToggleButton button changes the state. Returns an object `{ value, values, event }`. <br /><br /> **NB**: `values` is only available if `multiselect` is used / true.",
      "type": "function",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "related": [
    "Space"
  ],
  "checksum": "601291a9df0610714527ee55aedc2f008aedf44fa70190e47c0bfeb738e41dbf",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/toggle-button/ToggleButton.tsx",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/toggle-button/ToggleButton.tsx"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/toggle-button.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/toggle-button/"
    },
    "props": {
      "local": "src/docs/uilib/components/toggle-button/properties.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/toggle-button/properties/"
    },
    "events": {
      "local": "src/docs/uilib/components/toggle-button/events.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/toggle-button/events/"
    },
    "demos": {
      "local": "src/docs/uilib/components/toggle-button/demos.mdx",
      "public": "https://d3bdcd79.eufemia-e25.pages.dev/uilib/components/toggle-button/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T09:47:41.220Z",
  "schemaVersion": 1
}