euedujbarrios-uiby edujbarrios
Back to components

Inputs

Toggle Setting Row

A settings row with a clear label, helper text, and active toggle state.

togglesettingsform

Installation

Copy and paste the code into your project.

Accessibility notes

Expose toggle state with aria-pressed or switch semantics in production.

Auto-run evals

Start checks whenever a prompt version changes.

Preview accent

TypeScript
export function ToggleSettingRow() {
  return (
    <div className="flex w-full max-w-sm items-center justify-between gap-4 rounded-lg border border-white/12 bg-white/[0.06] p-4 shadow-2xl backdrop-blur">
      <div>
        <p className="text-sm font-semibold text-white">Auto-run evals</p>
        <p className="mt-1 text-xs leading-5 text-slate-400">Start checks whenever a prompt version changes.</p>
      </div>
      <button
        aria-pressed="true"
        className="flex h-7 w-12 shrink-0 items-center justify-end rounded-full border border-[#40E0D0]/35 bg-[#40E0D0]/18 p-1"
        type="button"
      >
        <span className="h-5 w-5 rounded-full bg-[#40E0D0] shadow-[0_0_16px_rgba(64,224,208,0.55)]" />
      </button>
    </div>
  );
}
Usage
<ToggleSettingRow />

Related components

Inputs

AI Chat Input

Intermediate

A responsive prompt composer with textarea, label, and high-contrast send button.

aichatform
View component

Inputs

Neural Search Input

Beginner

A rounded search field for command palettes, component galleries, and prompt libraries.

searchcommandinput
View component

Inputs

File Dropzone

Intermediate

A drag-and-drop upload surface for assets, screenshots, and UI reference files.

uploadfiledropzone
View component