Switch

Type: React component

How to get Switch?

JavaScript

import { Switch } from 'fds/components';

A switch button, allowing the user to toggle a single boolean value. Renders a round handle which represents the current value and animates a sliding movement when toggling the value.

Props

  1. isDisabled

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a disabled state.

    Default value

  2. falseLabel

    (Optional)

    Type: String

    The human readable label representing the falsy value.

    Default value

  3. name

    (Optional)

    Type: String

    The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.

  4. onChange

    (Optional)

    Type: Function

    A callback that is called whenever a component's value changes.

    This callback is called just before the "validate" prop is called.

    Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.

    Arguments

    Default value

  5. tooltipContent

    (Optional)

    Type: String | ReactElement

    The content of the tooltip that is displayed when hovering over the whole component.

    • string: the textual content of the tooltip

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

  6. trueLabel

    (Optional)

    Type: String

    The human readable label representing the truthy value.

    Default value

  7. validate

    (Optional)

    Type: Function

    A callback that is called directly after the value(s) of a form component change(s).

    Use this callback to check the selected value(s) against business rules and to set any feedback for the user based on this.

    Arguments

    Returns

  8. value

    (Optional)

    Type: Boolean

    The current value of the component. This value should be true or false.

    Default value