Clamp Checkbox labels to one line, add wrap prop

Labels no longer overflow their container: by default they are clamped
to a single line with an ellipsis and the full label is shown as the
wrapper's title on hover. Pass `wrap` to let the label flow onto
multiple lines. Adds the `twui-checkbox-label` class.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

dev/src/pages/forms.tsx

@@ -147,6 +147,15 @@ export default function FormsPage() {
                             title="Beta features"
                             label="Opt into experimental components."
                         />
+                        <Checkbox
+                            title="Long label (clamped)"
+                            label="This label is far too long to fit on a single line, so it is clamped to one line with an ellipsis - hover it to see the full text."
+                        />
+                        <Checkbox
+                            title="Long label (wrapped)"
+                            label="This label is far too long to fit on a single line, but the wrap prop lets it flow onto as many lines as it needs."
+                            wrap
+                        />
                         <Row className="gap-3">
                             <Span size="small" variant="faded">
                                 Notifications are {notifications ? "on" : "off"}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moduletrace/twui",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "description": "A modular skeletal React component framework for Tailwind CSS v4",
     "author": "Benjamin Toby",
     "type": "module",

src/form/Checkbox.tsx

@@ -39,6 +39,12 @@ export type CheckboxProps = Omit<
     clickDispatchHandler?: (value: boolean) => void;
     info?: string | ReactNode;
     wrapperWrapperProps?: ComponentProps<typeof Stack>;
+    /**
+     * Let the label wrap onto multiple lines. By default the label is
+     * clamped to a single line with an ellipsis, and the full text is
+     * shown as the wrapper's `title` on hover.
+     */
+    wrap?: boolean;
 };
 
 /**
@@ -46,6 +52,7 @@ export type CheckboxProps = Omit<
  * @className twui-checkbox
  * @className twui-checkbox-checked
  * @className twui-checkbox-unchecked
+ * @className twui-checkbox-label
  */
 export default function Checkbox({
     wrapperProps,
@@ -63,6 +70,7 @@ export default function Checkbox({
     noLabel,
     title,
     clickDispatchHandler,
+    wrap,
     ...props
 }: CheckboxProps) {
     const finalSize = size || 20;
@@ -72,6 +80,15 @@ export default function Checkbox({
     );
 
     const finalTitle = title;
+    const labelContent = label || finalTitle;
+
+    const hoverTitle =
+        wrapperProps?.title ??
+        (typeof labelContent == "string" || typeof labelContent == "number"
+            ? String(labelContent)
+            : typeof finalTitle == "string"
+              ? finalTitle
+              : undefined);
 
     React.useEffect(() => {
         if (typeof externalChecked == "undefined") return;
@@ -85,12 +102,17 @@ export default function Checkbox({
     return (
         <Stack
             {...wrapperWrapperProps}
-            className={twMerge("gap-1.5", wrapperWrapperProps?.className)}
+            className={twMerge(
+                "gap-1.5 min-w-0 max-w-full",
+                wrapperWrapperProps?.className,
+            )}
         >
             <div
                 {...wrapperProps}
+                title={hoverTitle}
                 className={twMerge(
-                    "flex items-start md:items-center gap-2 flex-wrap md:flex-nowrap",
+                    "flex gap-2 flex-nowrap min-w-0 max-w-full",
+                    wrap ? "items-start" : "items-center",
                     readOnly ? "opacity-70 pointer-events-none" : "",
                     wrapperClassName,
                     wrapperProps?.className,
@@ -104,7 +126,7 @@ export default function Checkbox({
                 <div
                     {...props}
                     className={twMerge(
-                        "flex items-center justify-center p-[3px] rounded-default",
+                        "flex items-center justify-center p-[3px] rounded-default shrink-0",
                         checked
                             ? "bg-primary twui-checkbox-checked text-white outline-slate-400"
                             : "dark:outline-white/50 outline-2 -outline-offset-2 twui-checkbox-unchecked",
@@ -121,15 +143,18 @@ export default function Checkbox({
                     {checked && <CheckMarkSVG />}
                 </div>
                 {!noLabel && (
-                    <Stack className="gap-0.5">
+                    <Stack className="gap-0.5 min-w-0 max-w-full">
                         <div
                             {...labelProps}
                             className={twMerge(
-                                "select-none whitespace-normal md:whitespace-nowrap",
+                                "select-none max-w-full twui-checkbox-label",
+                                wrap
+                                    ? "whitespace-normal break-words"
+                                    : "line-clamp-1 break-all",
                                 labelProps?.className,
                             )}
                         >
-                            {label || finalTitle}
+                            {labelContent}
                         </div>
                     </Stack>
                 )}