🚧 This website is work in progress 👷
Components
Controls
Toggle
Published
Toggle

Toggle

Editable Example

import { Toggle } from "@progressiveui/react";

() => {
  return (
    <Toggle
      labelA="Off"
      labelB="On"
      name="togglename"
    />
  );
};
PropDefaultDescriptionValue

defaultToggled

boolean
–

Specify whether the toggle should be on by default

toggled

boolean
–

labelA

string
–

Specify the label for the "off" position

labelB

string
–

Specify the label for the "on" position

onToggle

(value: boolean,htmlFor: string,event: ChangeEvent<HTMLInputElement>) => void
–

Provide an optional hook that is called when the control is toggled

className

string
–

id

string
–

Provide an id that unique represents the underlying input

name

string
–

Provide an name that unique represents the underlying input

onChange

(event: ChangeEvent<HTMLInputElement>) => void
–

Provide a function that is called when a change event occurs on the control

helperText

ReactNode
–

Provide text that is used alongside the control label for additional help

labelText

ReactNode
–

Provide the text that will be read by a screen reader when visiting this control

formItemClassName

string
–

Provide a custom className that is applied directly to the underlying <textarea> node

inputWrapperClassName

string
–

Provide a custom className that is applied directly to the underlying <input> or <textarea> node

hideLabel

boolean
–

Specify whether you want the underlying label to be visually hidden

invalid

any
–

Specify whether the control is currently invalid. Either a boolean in combination with invalidText or an object( eg. { message: "Message", …otherErrorProperties }) can be passed.

invalidText

any
–

Provide the text that is displayed when the control is in an invalid state

additional

ReactNode
–

Provide the content that will be shown in addition to the label (e.g. units, currency, etc.) This content will be placed after the label

light

boolean
–

placeholder

string
–

Specify the placeholder attribute for the input

required

boolean
–

Specify if the control is required (sets aria-invalid as well)

disabled

boolean
–

Specify if the control is disabled (sets aria-disabled as well)

readOnly

boolean
–

If the input is read-only, the user cannot change its value but focus and tabIndex are still applied (sets aria-readonly as well)

inline

boolean
–

Renders the input as inline element for horizontal forms

addonBefore

ReactNode
–

Additional helper in front of the input, e.g. a currency symbol (sets aria-describedby as well)

addonAfter

ReactNode
–

Additional helper behind the input, e.g. a currency symbol (sets aria-describedby as well)

components

AddonBeforeAddonAfterLabelHelperTextInlineErrorMessage
–

Supports replacement components

Edit this page

On this page

References