Toggle
A toggle is used to view or switch between enabled or disabled states.Installation
| Install | yarn add @atlaskit/toggle |
|---|---|
| Source | Bitbucket.org, (opens new window) |
| npm | @atlaskit/toggle, (opens new window) |
| Bundle | unpkg.com, (opens new window) |
Props
| Description | Additional information to be included in the |
|---|---|
| Type | { [x: string]: any; } |
| Description | You should not be accessing this prop under any circumstances.
It is provided by |
|---|---|
| Type | (payload: AnalyticsEventPayload) => UIAnalyticsEvent |
| 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. |
|---|---|
| Type | boolean |
| 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. |
|---|---|
| Type | string |
| Description | Use a pairing label with your toggle using |
|---|---|
| Type | string |
| 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 |
|---|---|
| Type | boolean |
| 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. |
|---|---|
| Type | boolean |
| 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. |
|---|---|
| Type | boolean |
| 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. |
|---|---|
| Type | string |
| Description | Descriptive name for the value property, to be submitted in a form. |
|---|---|
| Type | string |
| Description | Handler to be called when toggle is unfocused. |
|---|---|
| Type | (event: FocusEvent<HTMLInputElement, Element>, analyticsEvent: UIAnalyticsEvent) => void |
| Description | Handler to be called when native 'change' event happens internally. |
|---|---|
| Type | (event: ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void |
| Description | Handler to be called when toggle is focused. |
|---|---|
| Type | (event: FocusEvent<HTMLInputElement, Element>, analyticsEvent: UIAnalyticsEvent) => void |
| Description | No description. |
|---|---|
| Type | ((instance: HTMLInputElement) => void) | RefObject<HTMLInputElement> |
| Description | Toggle size. |
|---|---|
| Type | "regular" | "large" |
| Description | A
|
|---|---|
| Type | string |
| Description | Value to be submitted in a form. |
|---|---|
| Type | string |