Toggle

Toggle components are Input Fields that act as visual switches, allowing the user to turn a setting on or off. They represent a boolean value.

toggle.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'toggle',
      path: 'notificationsEnabled',
      label: 'Enable push notifications',
    },
  ],
});

toggle.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "toggle",
      "path": "notificationsEnabled",
      "label": "Enable push notifications"
    }
  ]
}

Props

Use these props to customize your Toggle component.

prop	type	description
hint	string	A description to display below the toggle control
togglePosition	string	Position of the toggle switch relative to its label. Possible values are left (default) or right.

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

toggle.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'toggle',
      path: 'marketingEmails',
      label: 'Receive marketing emails',
      props: {
        hint: 'We\'ll only send you relevant product updates.',
      },
    },
  ],
});

toggle.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "toggle",
      "path": "marketingEmails",
      "label": "Receive marketing emails",
      "props": {
        "hint": "We'll only send you relevant product updates."
      }
    }
  ]
}

Position

Use the property togglePosition to align the toggle switch to the left (default) or right of its label.

toggle.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'toggle',
      path: 'darkMode',
      label: 'Dark mode',
      props: {
        togglePosition: 'left',
      },
    },
  ],
});

toggle.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "toggle",
      "path": "darkMode",
      "label": "Dark mode",
      "props": {
        "togglePosition": "left"
      }
    }
  ]
}

Styling

Toggles can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-toggle-width	Total width of the toggle switch
--gui-toggle-height	Total height of the toggle switch
--gui-toggle-slider-width	Width of the round slider knob thumb
--gui-toggle-slider-height	Height of the round slider knob thumb
--gui-toggle-slider-transform	X-axis transform value distance for the knob when checked
--gui-bg-default	Background color of slider container when off
--gui-bg-disabled	Background color of slider container when disabled
--gui-border-default	Default border of the off-state slider background
--gui-intent-primary	Slider background and border color when checked / on
--gui-text-default	Border color when focused
--gui-intent-error	Border and shadow color when invalid

Anatomy

This is the anatomy of the Toggle Component in case you want to use your CSS styles.

toggle-anatomy.html

<gui-toggle class="gui-toggle gui-toggle--left">
  <label for="fieldUid">
    Label
    <div class="gui-toggle__hint" id="fieldUid_hint">Hint</div>
  </label>

  <div class="gui-widget gui-widget--horizontal gui-toggle--switch">
    <input
      type="checkbox"
      id="fieldUid"
      checked
      aria-required="true"
      aria-describedby="fieldUid_hint"
    />
    <span class="gui-toggle--slider" role="presentation"></span>
  </div>
</gui-toggle>