Components

Checkbox

Use for boolean fields, permission lists, and multi-select controls

Checkbox

Checkbox is used for boolean and multi-select input.

Import

import { Checkbox, Label } from "@downcity/ui";

Basic Example

import { Checkbox, Label } from "@downcity/ui";

export function AutoRunField() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="auto-run" defaultChecked />
      <Label htmlFor="auto-run">Run automatically on startup</Label>
    </div>
  );
}

Usage Notes

Pair it with Label
Group related checkboxes inside the same content block or settings section
If the interaction behaves like a pressed button, consider Toggle

Card

Use for structured information blocks, settings panels, and content containers

Dialog

Use for blocking confirmation, editing flows, and detail views

Table of Contents

Checkbox Import Basic Example Usage Notes