MYDS Logo

    MYDS

    Beta

    Toggle

    The Toggle component is a versatile switch that allows users to toggle between two states.

    Usage

    import { Toggle, ToggleThumb } from "@govtechmy/myds-react/toggle";
    export default () => (
      <Toggle>
        <ToggleThumb />
      </Toggle>
    );

    Examples

    Size

    Use the size prop to change the toggle size!

    Disabled

    Use the disabled prop to change to disabled style!

    Controlled Toggle

    Toggle can be handled by Controlled Method

    State: Off

    Uncontrolled Toggle

    Toggle can be handled by Internally

    This toggle manages its own state internally.

    Props

    Toggle

    PropTypeDefault
    size
    enum
    medium
    disabled
    boolean
    false

    On this page