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]>
2026-11-05 18:04:03 +01:00
parent c45f44a441
commit 66c2f6850e
3 changed files with 41 additions and 7 deletions
@@ -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"}