ToggleButton Component

A controlled toggle button component that switches between two states with visual feedback. Perfect for binary controls, feature toggles, and state indicators.

Overview

The ToggleButton component provides a button that maintains an active/inactive state, typically used for toggling features, settings, or modes. It requires controlled state management and supports multiple variants and sizes.

Usage

$3

``tsx
import { useState } from "react"
import { FieldAdd, FieldTypeCheckbox } from "@choiceform/icons-react"
import { ToggleButton } from "~/components/toggle-button"

export function BasicExample() {
const [isToggled, setIsToggled] = useState(false)

return (
aria-label="Toggle feature"
value={isToggled}
onChange={setIsToggled}
>
{isToggled ? : }

)
}
`

$3

`tsx
export function VariantsExample() {
const [states, setStates] = useState({
default: false,
secondary: false,
highlight: false,
})

const toggle = (key: keyof typeof states) => {
setStates((prev) => ({ ...prev, [key]: !prev[key] }))
}

return (


`tsx
export function SizesExample() {
const [isToggled, setIsToggled] = useState(false)

return (


| Prop | Type | Default | Description |
| ------------ | ----------------------------------------- | ----------- | --------------------------------------------- |
| value | boolean | - | Required. Current toggle state |
| onChange | (value: boolean) => void | - | Required. Callback when state changes |
| aria-label | string | - | Required. Accessible label for the button |
| variant | "default" \| "secondary" \| "highlight" | "default" | Visual style variant |
| size | "small" \| "medium" \| "large" | "medium" | Button size |
| disabled | boolean | false | Whether the button is disabled |
| className | string | - | Additional CSS classes |
| children | ReactNode | - | Button content (usually icons) |

Variants

$3

Standard toggle button with accent coloring when active.

`tsx
variant="default"
value={isActive}
onChange={setIsActive}
aria-label="Default toggle"
>


`

$3

Subtle styling with muted colors for secondary actions.

`tsx
variant="secondary"
value={isActive}
onChange={setIsActive}
aria-label="Secondary toggle"
>


`

$3

Prominent styling for important toggles that need attention.

`tsx
variant="highlight"
value={isActive}
onChange={setIsActive}
aria-label="Highlight toggle"
>


`

Sizes

$3

Compact size for dense layouts or secondary actions.

`tsx
size="small"
{...props}
>


`

$3

Standard size for most use cases.

`tsx
size="medium"
{...props}
>


`

$3

Larger size for prominent controls or touch interfaces.

`tsx
size="large"
{...props}
>


`

Advanced Examples

$3

`tsx
import { useState } from "react"

export function FeatureToggleGroup() {
const [features, setFeatures] = useState({
darkMode: false,
notifications: true,
autoSave: false,
soundEffects: true,
})

const toggleFeature = (key: keyof typeof features) => {
setFeatures((prev) => ({ ...prev, [key]: !prev[key] }))
}

return (


`tsx
import { useState } from "react"

export function ToolbarExample() {
const [formatting, setFormatting] = useState({
bold: false,
italic: false,
underline: false,
strikethrough: false,
})

const toggleFormat = (key: keyof typeof formatting) => {
setFormatting((prev) => ({ ...prev, [key]: !prev[key] }))
}

return (


`tsx
import { useState } from "react"

export function ViewModeExample() {
const [viewMode, setViewMode] = useState<"list" | "grid">("list")

return (