Toggle

A toggle is used to view or switch between enabled or disabled states.

Installation

Package installation information
Installyarn add @atlaskit/toggle
SourceBitbucket.org, (opens new window)
npm@atlaskit/toggle, (opens new window)
Bundleunpkg.com, (opens new window)

Props

analyticsContext

Description

Additional information to be included in the context of analytics events that come from button.

Type{ [x: string]: any; }

createAnalyticsEvent

Description

You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next and integrated in the component

Type(payload: AnalyticsEventPayload) => UIAnalyticsEvent

defaultChecked

Description

Sets whether the toggle is initially checked or not. After the initial interaction, whether the component is checked or not is controlled by the component.

Typeboolean

descriptionId

Description

Use this when you need to provide an extended description about how the toggle works using aria-describedby.

It's important to use this prop if the meaning of the toggle with the only a label would be unclear to people who use assistive technology.

Typestring

id

Description

Use a pairing label with your toggle using id and htmlFor props to set the relationship. For more information see labels on MDN web docs.

Typestring

isChecked

Description

If defined, it takes precedence over defaultChecked, and the toggle acts as a controlled component.

You can provide a onChange function to be notified of checked value changes

Typeboolean

isDisabled

Description

Sets if the toggle is disabled or not. This prevents any interaction. Disabled toggles will not appear in the tab order for assistive technology.

Typeboolean

isLoading

Description

If defined, it displays a spinner within the toggle. This prop is useful when the toggle's state is being fetched or updated asynchronously.

Typeboolean

label

Description

Text value which will be associated with toggle input using aria-labelledby attribute.

Use only when you can't use a visible label for the toggle.

Typestring

name

Description

Descriptive name for the value property, to be submitted in a form.

Typestring

onBlur

Description

Handler to be called when toggle is unfocused.

Type(event: FocusEvent<HTMLInputElement, Element>, analyticsEvent: UIAnalyticsEvent) => void

onChange

Description

Handler to be called when native 'change' event happens internally.

Type(event: ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void

onFocus

Description

Handler to be called when toggle is focused.

Type(event: FocusEvent<HTMLInputElement, Element>, analyticsEvent: UIAnalyticsEvent) => void

ref

Description
No description.
Type((instance: HTMLInputElement) => void) | RefObject<HTMLInputElement>

size

Description

Toggle size.

Type"regular" | "large"

testId

Description

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests. We have added 2 testIds:

  • testId that targets the Label component to interact with the component.
  • {testId}--input to check if the toggle has been checked/unchecked.
Typestring

value

Description

Value to be submitted in a form.

Typestring
Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License