@fpkit/acss 3.7.0 → 3.9.0

package/src/components/form/input.stories.tsx

@@ -1,7 +1,9 @@
 import { StoryObj, Meta } from "@storybook/react-vite";
 import { within, userEvent, expect } from "storybook/test";
+import React from "react";
 
 import Input from "./inputs";
+import { Checkbox as CheckboxComponent } from "./checkbox";
 import "./form.scss";
 
 const meta: Meta<typeof Input> = {
@@ -222,6 +224,254 @@ export const UrlInput: Story = {
   },
 } as Story;
 
+export const Checkbox: Story = {
+  args: {
+    type: "checkbox",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("checkbox");
+    expect(input).toHaveAttribute("type", "checkbox");
+
+    await userEvent.click(input);
+    expect(input).toBeChecked();
+
+    await userEvent.click(input);
+    expect(input).not.toBeChecked();
+  },
+} as Story;
+
+// ============================================================================
+// Checkbox Wrapper Component Stories
+// ============================================================================
+
+/**
+ * CheckboxWrapper - Basic checkbox with label
+ *
+ * Demonstrates the Checkbox wrapper component with simplified API.
+ * Features automatic label association, boolean onChange, and keyboard support.
+ */
+export const CheckboxWrapper: Story = {
+  render: () => (
+    <CheckboxComponent id="basic" label="I accept the terms and conditions" />
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+
+    await step("Checkbox renders unchecked", async () => {
+      expect(checkbox).toBeInTheDocument();
+      expect(checkbox).not.toBeChecked();
+    });
+
+    await step("Checkbox can be checked by clicking", async () => {
+      await userEvent.click(checkbox);
+      expect(checkbox).toBeChecked();
+    });
+
+    await step("Label can be clicked to toggle", async () => {
+      const label = canvas.getByText("I accept the terms and conditions");
+      await userEvent.click(label);
+      expect(checkbox).not.toBeChecked();
+    });
+
+    await step("Space key toggles checkbox", async () => {
+      checkbox.focus();
+      await userEvent.keyboard(" ");
+      expect(checkbox).toBeChecked();
+    });
+  },
+};
+
+/**
+ * CheckboxControlled - Controlled checkbox with state management
+ *
+ * Demonstrates controlled mode with React state and boolean onChange API.
+ */
+const CheckboxControlledExample = () => {
+  const [checked, setChecked] = React.useState(false);
+  return (
+    <div>
+      <CheckboxComponent
+        id="controlled"
+        label="Subscribe to newsletter"
+        checked={checked}
+        onChange={setChecked}
+      />
+      <p style={{ marginTop: "1rem", fontSize: "0.875rem", color: "#6b7280" }}>
+        Status: {checked ? "✓ Subscribed" : "Not subscribed"}
+      </p>
+    </div>
+  );
+};
+
+export const CheckboxControlled: Story = {
+  render: () => <CheckboxControlledExample />,
+};
+
+/**
+ * CheckboxRequired - Required checkbox with asterisk indicator
+ *
+ * Shows required field indicator and aria-required attribute.
+ */
+export const CheckboxRequired: Story = {
+  render: () => (
+    <CheckboxComponent
+      id="required"
+      label="I accept the terms"
+      required
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    expect(checkbox).toHaveAttribute("aria-required", "true");
+    expect(canvas.getByText("*")).toBeInTheDocument();
+  },
+};
+
+/**
+ * CheckboxDisabled - Disabled checkbox (WCAG compliant)
+ *
+ * Demonstrates aria-disabled pattern that remains focusable for screen readers.
+ */
+export const CheckboxDisabled: Story = {
+  render: () => (
+    <CheckboxComponent
+      id="disabled"
+      label="Disabled option"
+      disabled
+      defaultChecked
+    />
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+
+    await step("Disabled checkbox has aria-disabled", async () => {
+      expect(checkbox).toHaveAttribute("aria-disabled", "true");
+    });
+
+    await step("Disabled checkbox remains focusable", async () => {
+      await userEvent.tab();
+      expect(checkbox).toHaveFocus();
+    });
+
+    await step("Disabled checkbox prevents interaction", async () => {
+      const wasChecked = checkbox.checked;
+      await userEvent.click(checkbox);
+      // Value should remain unchanged due to disabled state
+      expect(checkbox.checked).toBe(wasChecked);
+    });
+  },
+};
+
+/**
+ * CheckboxValidation - Checkbox with validation error
+ *
+ * Shows error state with aria-invalid and error message.
+ */
+export const CheckboxValidation: Story = {
+  render: () => (
+    <CheckboxComponent
+      id="validation"
+      label="I accept the terms"
+      validationState="invalid"
+      errorMessage="You must accept the terms to continue"
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    expect(checkbox).toHaveAttribute("aria-invalid", "true");
+    expect(checkbox).toHaveAttribute("aria-describedby");
+    expect(canvas.getByText("You must accept the terms to continue")).toBeInTheDocument();
+  },
+};
+
+/**
+ * CheckboxWithHint - Checkbox with hint text
+ *
+ * Demonstrates hint text for additional context.
+ */
+export const CheckboxWithHint: Story = {
+  render: () => (
+    <CheckboxComponent
+      id="hint"
+      label="Enable two-factor authentication"
+      hintText="Adds an extra layer of security to your account"
+    />
+  ),
+};
+
+/**
+ * CheckboxCustomSize - Custom sized checkboxes using CSS variables
+ *
+ * Demonstrates responsive sizing via --checkbox-size variable.
+ */
+export const CheckboxCustomSize: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "1.5rem", flexDirection: "column" }}>
+      <CheckboxComponent
+        id="small"
+        label="Small (1rem)"
+        styles={{ "--checkbox-gap": "0.375rem" } as React.CSSProperties}
+      />
+      <CheckboxComponent
+        id="medium"
+        label="Medium (1.25rem - default)"
+      />
+      <CheckboxComponent
+        id="large"
+        label="Large (1.5rem)"
+        styles={{ "--checkbox-gap": "0.75rem" } as React.CSSProperties}
+      />
+      <CheckboxComponent
+        id="xlarge"
+        label="Extra Large (2rem)"
+        styles={{ "--checkbox-gap": "1rem" } as React.CSSProperties}
+      />
+    </div>
+  ),
+};
+
+/**
+ * CheckboxGroup - Multiple checkboxes in a fieldset
+ *
+ * Demonstrates grouping related checkboxes with semantic HTML.
+ */
+export const CheckboxGroup: Story = {
+  render: () => (
+    <fieldset style={{ border: "1px solid #d1d5db", padding: "1.5rem", borderRadius: "0.5rem" }}>
+      <legend style={{ fontWeight: "600", fontSize: "1rem", padding: "0 0.5rem" }}>
+        Notification Preferences
+      </legend>
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem", marginTop: "1rem" }}>
+        <CheckboxComponent
+          id="email"
+          name="notifications"
+          value="email"
+          label="Email notifications"
+          defaultChecked
+        />
+        <CheckboxComponent
+          id="sms"
+          name="notifications"
+          value="sms"
+          label="SMS notifications"
+        />
+        <CheckboxComponent
+          id="push"
+          name="notifications"
+          value="push"
+          label="Push notifications"
+          defaultChecked
+        />
+      </div>
+    </fieldset>
+  ),
+};
+
 /**
  * CSS Variable Customization
  *
@@ -237,7 +487,14 @@ export const UrlInput: Story = {
  */
 export const Customization: Story = {
   render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: "2rem", maxWidth: "600px" }}>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "2rem",
+        maxWidth: "600px",
+      }}
+    >
       {/* Custom brand styling */}
       <div>
         <h4>Custom Brand Styling</h4>

package/src/index.scss

@@ -23,6 +23,7 @@
 @use "./components/badge/badge.scss";
 @use "./components/nav/nav.scss";
 @use "./components/form/form.scss";
+// @use "./components/checkbox/checkbox.scss"; // Deprecated - checkbox styles now in form/checkbox.scss (imported by form.scss)
 @use "./components/breadcrumbs/breadcrumb.scss";
 @use "./components/list/list.scss";
 @use "./components/alert/alert.scss";

package/src/index.ts

@@ -63,6 +63,13 @@ export {
 export { Alert, type AlertProps } from "./components/alert/alert";
 export { Field, type FieldProps } from "./components/form/fields";
 export { Input, type InputProps } from "./components/form/inputs";
+
+/**
+ * Checkbox wrapper component (uses Input type="checkbox")
+ * This is the recommended checkbox component.
+ */
+export { Checkbox, type CheckboxProps } from "./components/form/checkbox";
+
 export { Icon, type IconProps } from "./components/icons/icon";
 export { Img } from "./components/images/img";
 export type { ImgProps } from "./components/images/img.types";
@@ -121,7 +128,12 @@ export * from "./components/layout/landmarks";
 export { Box, type BoxProps } from "./components/box/box";
 export { Stack, type StackProps } from "./components/stack/stack";
 export { Cluster, type ClusterProps } from "./components/cluster/cluster";
-export { default as Grid, GridItem, type GridProps, type GridItemProps } from "./components/grid/grid";
+export {
+  default as Grid,
+  GridItem,
+  type GridProps,
+  type GridItemProps,
+} from "./components/grid/grid";
 export { Row, type RowProps } from "./components/row/row";
 export { Col, type ColProps } from "./components/col/col";
 export { default as Flex } from "./components/flexbox/flex";

package/src/sass/_columns.scss

@@ -36,10 +36,10 @@
  * accessed via JavaScript. SCSS uses literal values for media queries.
  */
 :root {
-  --col-breakpoint-xs: 0rem;      /* 0px - base mobile */
-  --col-breakpoint-sm: 30rem;     /* 480px - large phones */
-  --col-breakpoint-md: 48rem;     /* 768px - tablets */
-  --col-breakpoint-lg: 64rem;     /* 1024px - desktops */
+  --col-breakpoint-xs: 0rem; /* 0px - base mobile */
+  --col-breakpoint-sm: 30rem; /* 480px - large phones */
+  --col-breakpoint-md: 48rem; /* 768px - tablets */
+  --col-breakpoint-lg: 64rem; /* 1024px - desktops */
 
   /* Legacy support - keep for backward compatibility */
   --col-breakpoint: var(--col-breakpoint-md);
@@ -51,9 +51,9 @@
  * @media queries require compile-time values, not runtime CSS variables.
  */
 $col-breakpoints: (
-  'sm': 30rem,
-  'md': 48rem,
-  'lg': 64rem,
+  "sm": 30rem,
+  "md": 48rem,
+  "lg": 64rem,
 );
 
 /* ============================================================================
@@ -432,8 +432,12 @@ $col-breakpoints: (
  */
 @each $breakpoint, $min-width in $col-breakpoints {
   @media (width >= #{$min-width}) {
-    .col-#{$breakpoint}-order-first { order: -1; }
-    .col-#{$breakpoint}-order-last { order: 13; }
+    .col-#{$breakpoint}-order-first {
+      order: -1;
+    }
+    .col-#{$breakpoint}-order-last {
+      order: 13;
+    }
 
     @for $i from 0 through 12 {
       .col-#{$breakpoint}-order-#{$i} {

package/src/styles/checkbox/checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/checkbox/checkbox.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAeA;AACE;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;AAAA;AAAA;AAIA;AAAA;AAAA;EAIA;EACA;EACA;EACA;AAAA;AAAA;AAIA;AAAA;AAAA;EAIA;EACA;AAEA;AAAA;AAAA;AAIA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;AAIA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;AAEA;AAgBA;;AAfA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAIJ;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AAOA;AAMA;AAeA;AAcA;AAaA;;AAtDA;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAKJ;EAEE;;AAEA;EACE;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;;AAIJ;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAKE;EACE;EACA;;AAGF;EACE;;AAGF;AAAA;EAEE","file":"checkbox.css"}

package/src/styles/form/checkbox.css

@@ -0,0 +1,97 @@
+/**
+ * Checkbox Wrapper Component Styles
+ *
+ * Modern CSS architecture using :has() selector with ARIA attributes.
+ * No JavaScript class management required - ARIA attributes drive both
+ * accessibility AND styling.
+ *
+ * CSS Custom Properties:
+ * - --checkbox-gap: Space between checkbox and label (default: 0.5rem)
+ * - --checkbox-disabled-opacity: Opacity for disabled state (default: 0.6)
+ * - --checkbox-disabled-color: Label color when disabled (default: #6b7280)
+ * - --checkbox-label-fs: Label font size (default: 1rem)
+ * - --checkbox-label-lh: Label line height (default: 1.5)
+ * - --color-required: Required indicator color (default: #dc2626)
+ * - --checkbox-focus-ring-color: Focus ring color (default: #2563eb)
+ * - --checkbox-focus-ring-width: Focus ring width (default: 0.125rem)
+ * - --checkbox-focus-ring-offset: Focus ring offset (default: 0.125rem)
+ * - --checkbox-hover-label-color: Label color on hover (default: inherit)
+ * - --checkbox-error-label-color: Label color when invalid (default: #dc2626)
+ * - --checkbox-valid-label-color: Label color when valid (default: #16a34a)
+ * - --checkbox-focus-radius: Focus outline border radius (default: 0.125rem)
+ *
+ * WCAG 2.1 AA Compliance:
+ * - 2.4.7 Focus Visible: Focus-visible indicators with sufficient contrast
+ * - 2.3.3 Animation from Interactions: Respects prefers-reduced-motion
+ * - 3.3.1 Error Identification: Visual error states with color + text
+ * - 4.1.2 Name, Role, Value: ARIA attributes for assistive technologies
+ * - 1.4.13 Content on Hover or Focus: Hover states for visual feedback
+ */
+div:has(> input[type=checkbox]) {
+  display: flex;
+  align-items: center;
+  gap: var(--checkbox-gap, 0.5rem);
+  position: relative;
+}
+div:has(> input[type=checkbox]) > input[type=checkbox] {
+  flex-shrink: 0;
+  order: -1;
+}
+div:has(> input[type=checkbox]):not(:has(> input[aria-disabled=true])):hover .checkbox-label {
+  color: var(--checkbox-hover-label-color, inherit);
+}
+div:has(> input[type=checkbox]):has(> input:focus-visible) .checkbox-label {
+  outline: var(--checkbox-focus-ring-width, 0.125rem) solid var(--checkbox-focus-ring-color, #2563eb);
+  outline-offset: var(--checkbox-focus-ring-offset, 0.125rem);
+  border-radius: var(--checkbox-focus-radius, 0.125rem);
+}
+div:has(> input[type=checkbox]):has(> input[aria-disabled=true]) {
+  opacity: var(--checkbox-disabled-opacity, 0.6);
+  cursor: not-allowed;
+}
+div:has(> input[type=checkbox]):has(> input[aria-disabled=true]) .checkbox-label {
+  color: var(--checkbox-disabled-color, #6b7280);
+  cursor: not-allowed;
+}
+div:has(> input[type=checkbox]):has(> input[aria-invalid=true]) .checkbox-label {
+  color: var(--checkbox-error-label-color, #dc2626);
+}
+div:has(> input[type=checkbox]):has(> input[aria-invalid=false]:checked) .checkbox-label {
+  color: var(--checkbox-valid-label-color, #16a34a);
+}
+
+.checkbox-label {
+  cursor: pointer;
+  font-size: var(--checkbox-label-fs, 1rem);
+  line-height: var(--checkbox-label-lh, 1.5);
+  user-select: none;
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+  transition: color 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .checkbox-label {
+    transition: none;
+  }
+}
+.checkbox-label .checkbox-required {
+  color: var(--color-required, #dc2626);
+  font-weight: 600;
+  margin-inline-start: 0.125rem;
+}
+
+@media (forced-colors: active) {
+  .checkbox-input {
+    forced-color-adjust: auto;
+  }
+}
+
+@container (max-width: 400px) {
+  div:has(> input[type=checkbox]) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/*# sourceMappingURL=checkbox.css.map */

package/src/styles/form/checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/form/checkbox.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BA;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAKA;EACE;;AAOF;EACE;EAEA;EACA;;AAMJ;EACE;EACA;;AAEA;EACE;EACA;;AAOF;EACE;;AAMF;EACE;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAXF;IAYI;;;AAGF;EACE;EACA;EACA;;;AAQF;EAHF;IAII;;;;AAMJ;EACE;IACE;IACA","file":"checkbox.css"}

package/src/styles/form/form.css

@@ -1,3 +1,98 @@
+/**
+ * Checkbox Wrapper Component Styles
+ *
+ * Modern CSS architecture using :has() selector with ARIA attributes.
+ * No JavaScript class management required - ARIA attributes drive both
+ * accessibility AND styling.
+ *
+ * CSS Custom Properties:
+ * - --checkbox-gap: Space between checkbox and label (default: 0.5rem)
+ * - --checkbox-disabled-opacity: Opacity for disabled state (default: 0.6)
+ * - --checkbox-disabled-color: Label color when disabled (default: #6b7280)
+ * - --checkbox-label-fs: Label font size (default: 1rem)
+ * - --checkbox-label-lh: Label line height (default: 1.5)
+ * - --color-required: Required indicator color (default: #dc2626)
+ * - --checkbox-focus-ring-color: Focus ring color (default: #2563eb)
+ * - --checkbox-focus-ring-width: Focus ring width (default: 0.125rem)
+ * - --checkbox-focus-ring-offset: Focus ring offset (default: 0.125rem)
+ * - --checkbox-hover-label-color: Label color on hover (default: inherit)
+ * - --checkbox-error-label-color: Label color when invalid (default: #dc2626)
+ * - --checkbox-valid-label-color: Label color when valid (default: #16a34a)
+ * - --checkbox-focus-radius: Focus outline border radius (default: 0.125rem)
+ *
+ * WCAG 2.1 AA Compliance:
+ * - 2.4.7 Focus Visible: Focus-visible indicators with sufficient contrast
+ * - 2.3.3 Animation from Interactions: Respects prefers-reduced-motion
+ * - 3.3.1 Error Identification: Visual error states with color + text
+ * - 4.1.2 Name, Role, Value: ARIA attributes for assistive technologies
+ * - 1.4.13 Content on Hover or Focus: Hover states for visual feedback
+ */
+div:has(> input[type=checkbox]) {
+  display: flex;
+  align-items: center;
+  gap: var(--checkbox-gap, 0.5rem);
+  position: relative;
+}
+div:has(> input[type=checkbox]) > input[type=checkbox] {
+  flex-shrink: 0;
+  order: -1;
+}
+div:has(> input[type=checkbox]):not(:has(> input[aria-disabled=true])):hover .checkbox-label {
+  color: var(--checkbox-hover-label-color, inherit);
+}
+div:has(> input[type=checkbox]):has(> input:focus-visible) .checkbox-label {
+  outline: var(--checkbox-focus-ring-width, 0.125rem) solid var(--checkbox-focus-ring-color, #2563eb);
+  outline-offset: var(--checkbox-focus-ring-offset, 0.125rem);
+  border-radius: var(--checkbox-focus-radius, 0.125rem);
+}
+div:has(> input[type=checkbox]):has(> input[aria-disabled=true]) {
+  opacity: var(--checkbox-disabled-opacity, 0.6);
+  cursor: not-allowed;
+}
+div:has(> input[type=checkbox]):has(> input[aria-disabled=true]) .checkbox-label {
+  color: var(--checkbox-disabled-color, #6b7280);
+  cursor: not-allowed;
+}
+div:has(> input[type=checkbox]):has(> input[aria-invalid=true]) .checkbox-label {
+  color: var(--checkbox-error-label-color, #dc2626);
+}
+div:has(> input[type=checkbox]):has(> input[aria-invalid=false]:checked) .checkbox-label {
+  color: var(--checkbox-valid-label-color, #16a34a);
+}
+
+.checkbox-label {
+  cursor: pointer;
+  font-size: var(--checkbox-label-fs, 1rem);
+  line-height: var(--checkbox-label-lh, 1.5);
+  user-select: none;
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+  transition: color 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .checkbox-label {
+    transition: none;
+  }
+}
+.checkbox-label .checkbox-required {
+  color: var(--color-required, #dc2626);
+  font-weight: 600;
+  margin-inline-start: 0.125rem;
+}
+
+@media (forced-colors: active) {
+  .checkbox-input {
+    forced-color-adjust: auto;
+  }
+}
+
+@container (max-width: 400px) {
+  div:has(> input[type=checkbox]) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
 :root {
   --input-border-color: gray;
   --input-appearance: none;
@@ -19,6 +114,22 @@
   --placeholder-fs: smaller;
   --form-direction: column;
   --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polyline points='6,9 10,13 14,9' stroke='%23000000' stroke-width='1.5' fill='none' /></svg>");
+  /* ==========================================================================
+     Size Tokens
+     ========================================================================== */
+  --checkbox-size-sm: 1rem; /* 16px */
+  --checkbox-size-md: 1.25rem; /* 20px */
+  --checkbox-size-lg: 1.5rem; /* 24px */
+  /* ==========================================================================
+     Base Properties
+     ========================================================================== */
+  --checkbox-size: var(--checkbox-size-md);
+  --checkbox-bg: #ffffff;
+  --checkbox-border: 0.125rem solid #6b7280; /* 2px border */
+  --checkbox-border-color: #6b7280; /* Gray 500 */
+  --checkbox-radius: 0.25rem; /* 4px */
+  --checkbox-cursor: pointer;
+  --checkbox-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 form {
@@ -35,9 +146,7 @@ form label {
   display: block;
 }
 
-input[type]:not([type=checkbox], [type=radio]),
-textarea,
-select {
+input {
   -webkit-appearance: var(--input-appearance);
   -moz-appearance: var(--input-appearance);
   appearance: var(--input-appearance);
@@ -49,6 +158,19 @@ select {
   border-radius: var(--input-radius);
   background-color: var(--input-bg, #fff);
 }
+input:focus-visible, input:focus {
+  outline: var(--input-focus-outline);
+  outline-offset: var(--input-focus-outline-offset);
+}
+input[aria-disabled=true], input:disabled {
+  --input-border-color: lightgray;
+  background-color: var(--input-disabled-bg);
+  opacity: var(--input-disabled-opacity);
+  cursor: var(--input-disabled-cursor);
+  text-transform: capitalize;
+  text-decoration: line-through;
+}
+
 input[type]:not([type=checkbox], [type=radio])::placeholder,
 textarea::placeholder,
 select::placeholder {
@@ -57,14 +179,6 @@ select::placeholder {
   font-size: var(--placeholder-fs);
   text-transform: capitalize;
 }
-input[type]:not([type=checkbox], [type=radio]):focus-visible, input[type]:not([type=checkbox], [type=radio]):focus,
-textarea:focus-visible,
-textarea:focus,
-select:focus-visible,
-select:focus {
-  outline: var(--input-focus-outline);
-  outline-offset: var(--input-focus-outline-offset);
-}
 input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder,
 textarea[aria-required=true]::placeholder,
 select[aria-required=true]::placeholder {
@@ -76,17 +190,19 @@ textarea[aria-required=true]::placeholder::after,
 select[aria-required=true]::placeholder::after {
   content: "* ";
 }
-input[type]:not([type=checkbox], [type=radio])[aria-disabled=true], input[type]:not([type=checkbox], [type=radio]):disabled,
-textarea[aria-disabled=true],
-textarea:disabled,
-select[aria-disabled=true],
-select:disabled {
-  --input-border-color: lightgray;
-  background-color: var(--input-disabled-bg);
-  opacity: var(--input-disabled-opacity);
-  cursor: var(--input-disabled-cursor);
-  text-transform: capitalize;
-  text-decoration: line-through;
+
+input[type=checkbox] {
+  opacity: 1;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  margin: 0;
+  cursor: var(--checkbox-cursor);
+  flex-shrink: 0;
+}
+input[type=checkbox]:checked {
+  background-color: var(--checkbox-bg, red);
+  outline: rebeccapurple solid 2px;
+  background: #dbeafe;
 }
 
 select {

package/src/styles/form/form.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/form/form.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAKA;AAAA;AAAA;EACE;EACA;;AACA;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"form.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/form/checkbox.scss","../../components/form/form.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BA;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAKA;EACE;;AAOF;EACE;EAEA;EACA;;AAMJ;EACE;EACA;;AAEA;EACE;EACA;;AAOF;EACE;;AAMF;EACE;;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAXF;IAYI;;;AAGF;EACE;EACA;EACA;;;AAQF;EAHF;IAII;;;;AAMJ;EACE;IACE;IACA;;;AC3HJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;AAEA;AAAA;AAAA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAOF;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGA;AAAA;AAAA;EACE;EACA;;AACA;AAAA;AAAA;EACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"form.css"}