Negatory. Postpone Mission.

    @leafygreen-ui/toggle
    TypeScript icon, indicating that this package has built-in type declarations

    7.0.4 • Public • Published

    Toggle

    npm (scoped)

    View on MongoDB.design

    Installation

    Yarn

    yarn add @leafygreen-ui/toggle

    NPM

    npm install @leafygreen-ui/toggle

    Example

    import Toggle from '@leafygreen-ui/toggle';
    
    return (
      <>
        <label id="label" htmlFor="toggle">
          Change setting
        </label>
    
        <Toggle
          id="toggle"
          aria-labelledby="label"
          onChange={(checked, event) => {
            /* Handle the change event */
          }}
        />
      </>
    );

    Output HTML

    <label for="toggle" id="label" class="leafygreen-ui-r8mbam"
      >Change setting</label
    >
    
    <div class="leafygreen-ui-19odf8z">
      <button
        id="toggle"
        aria-labelledby="label"
        role="switch"
        aria-checked="false"
        aria-disabled="false"
        class="leafygreen-ui-1vdkpyx"
        data-leafygreen-ui="toggle-button"
      >
        <span aria-hidden="true" class="leafygreen-ui-u8d1r2">On</span>
        <span aria-hidden="true" class="leafygreen-ui-1eonihm">Off</span>
        <div class="leafygreen-ui-uyx43a"></div>
      </button>
    
      <div data-leafygreen-ui="interaction-ring" class="leafygreen-ui-igvj0l"></div>
    </div>

    Properties

    Prop Type Description Default
    darkMode boolean Determines if the Toggle will render the dark mode styles. false
    size 'default', 'small', 'xsmall' Sets the size of the toggle. 'default'
    checked boolean Set's the checked state of the Toggle.
    disabled boolean Disables the Toggle. false
    onChange (checked, MouseEvent) => void onChange fires when the checked state of the component is being updated. Receives the updated checked state of the toggle as its first argument, and the associated mouse event as the second.
    className string Adds a className to the outermost element. ''
    ... HTML button attributes Any supported HTML button properties will be applied to the button element.

    Accessibility

    For the Toggle to be accessible to screen readers, you must pass either aria-label or aria-labelledby to Toggle. Please note, if this is a part of a form, this is in addition to using htmlFor to associate a label with the Toggle. You will see TypeScript and console errors if this isn't done.

    Please reach out if you would like further guidance on how to programmatically associate text with the Toggle component.

    Keywords

    none

    Install

    npm i @leafygreen-ui/toggle

    DownloadsWeekly Downloads

    912

    Version

    7.0.4

    License

    Apache-2.0

    Unpacked Size

    246 kB

    Total Files

    18

    Last publish

    Collaborators

    • thesonofthomp
    • dave.mccarthy
    • hswolff