forms / stable

PropertyToggle

Bordered 28px pressed-pill or a Switch inside PropertyField for an immediate boolean record property, with an optional icon and focusable disabled explanation.

LIVE PREVIEW

Loading preview…

When to use

Boolean property-bar chips; use PropertyField to render a rail Switch.
icon identifies the property in both states. A boolean has no options or option leading.

Consider an alternative

Form submission — use Checkbox.
Standalone settings — use Switch.

Import

import { PropertyToggle } from '@revido-llc/kit';

Keyboard interaction

Enter / Space — toggle
Tab — focus and read a disabled reason

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


isSelected (required)	boolean	—
label (required)	string	—
onChange (required)	(selected: boolean) => void	—
disabledReason	string	—
icon	ReactNode	—	Decorative property icon; stays visible in both pressed states.
isDisabled	boolean	false
layout	"chip" \| "field"	—	Bordered chip, or a Switch rail value; inferred inside PropertyField.

Examples

Off and on with icons

"use client";
import { useState } from "react";
import { Receipt } from "lucide-react";
import { Icon, PropertyToggle } from "@revido-llc/kit";

export default function Example() {
  const [billable, setBillable] = useState(false);
  return <PropertyToggle label="Billable" icon={<Icon as={Receipt} tone="tertiary" />}
    isSelected={billable} onChange={setBillable}
    isDisabled={false} disabledReason="Only finance can change billing" />;
}

Text only

"use client";
import { useState } from "react";
import { Receipt } from "lucide-react";
import { Icon, PropertyToggle } from "@revido-llc/kit";

export default function Example() {
  const [billable, setBillable] = useState(false);
  return <PropertyToggle label="Billable"
    isSelected={billable} onChange={setBillable}
    isDisabled={false} disabledReason="" />;
}

Disabled with reason

"use client";
import { useState } from "react";
import { Receipt } from "lucide-react";
import { Icon, PropertyToggle } from "@revido-llc/kit";

export default function Example() {
  const [billable, setBillable] = useState(true);
  return <PropertyToggle label="Billable" icon={<Icon as={Receipt} tone="tertiary" />}
    isSelected={billable} onChange={setBillable}
    isDisabled={true} disabledReason="Only finance can change billing" />;
}

Labelled property rail

"use client";
import { useState } from "react";
import { Receipt } from "lucide-react";
import { Icon, PropertyField, PropertyToggle } from "@revido-llc/kit";
export default function Example() {
  const [billable, setBillable] = useState(true);
  return <PropertyField label="Billing" layout="row">
    <PropertyToggle label="Billable" icon={<Icon as={Receipt} tone="tertiary" />} isSelected={billable} onChange={setBillable} />
  </PropertyField>;
}

Literal anatomy

Bind an immediate boolean property in the consuming app.

import { useState } from "react";
import { PropertyToggle } from "@revido-llc/kit";
export default function PropertyAnatomy() {
  const [selected, setSelected] = useState(false);
  return <PropertyToggle label="Archived" isSelected={selected} onChange={setSelected} />;
}