InputsReact

Toggle

A two-state button that can be on or off.

Rendered by React 19.3.1

Loading React…

import * as React from 'react'
import { Toggle } from '@hamur/react/toggle'

export default function ToggleExample() {
  const [pressed, setPressed] = React.useState(false)
  return (
    <div className="stack">
      <div className="row">
        <Toggle
          className="toggle"
          aria-label="Bold"
          onPressedChange={setPressed}
        >
          Bold
        </Toggle>
        <Toggle className="toggle" aria-label="Italic" disabled>
          Italic
        </Toggle>
      </div>
      <p className="muted">Bold is {pressed ? 'on' : 'off'}</p>
    </div>
  )
}

62Tests passing in React · 0 failing

5.6 KiBSize

0.60 msCommit

29.0 msFrame

11.0 msMutations

3.00 msMutatedElements

Not measured yetMemory

productdevbook and 13 upstream authors12 commits · last Nov 4

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<Toggle />

Examples

The demo at the top is the one example this component has so far.

API reference

6 props across 1 parts, in React syntax. className, style, render are listed once, under Shared props.

Toggle`Toggle`

A two-state button that can be on or off. Renders a <button>.

Toggle props
Prop	Type	Default
`value`A unique string that identifies the toggle when used	`TValue`	`—`
`defaultPressed`Whether the toggle button is currently pressed.	`boolean`	`false`
`pressed`Whether the toggle button is currently pressed.	`boolean`	`—`
`onPressedChange`Callback fired when the pressed state is changed.	`((pressed: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element \| undefined; }) => void)`	`—`
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`true`
`disabled`Whether the component should ignore user interaction.	`boolean`	`false`

Toggle data attributes
Data attribute	Description
`data-pressed`	Present when the toggle button is pressed.
`data-disabled`	Present when the toggle button is disabled.

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Toggle has no keys of its own; as a native <button> it takes Enter and Space from the browser.

Accessibility

What the parts set
Part	Sets	So that
Toggle	`aria-pressed` from `pressed`	a screen reader says whether it is on
Toggle	renders a `<button>` while `nativeButton` is on	it is reached and activated like any button

Focus order

Toggle is one tab stop; inside a ToggleGroup the group decides which toggle takes it.