diff --git a/.changeset/listbox-checkbox-primary-line.md b/.changeset/listbox-checkbox-primary-line.md new file mode 100644 index 000000000..79fe0d826 --- /dev/null +++ b/.changeset/listbox-checkbox-primary-line.md @@ -0,0 +1,5 @@ +--- +'@launchpad-ui/components': patch +--- + +Align the multi-select `ListBoxItem` checkbox to the item's primary line instead of vertically centering it against the whole item, so items with a stacked label and description keep the checkbox next to the label. diff --git a/packages/components/src/ListBox.tsx b/packages/components/src/ListBox.tsx index 5d0e13f9d..64391d11c 100644 --- a/packages/components/src/ListBox.tsx +++ b/packages/components/src/ListBox.tsx @@ -70,7 +70,7 @@ const ListBoxItem = ({ ref, ...props }: ListBoxItemProps) = <> {selectionMode === 'multiple' && (
diff --git a/packages/components/src/styles/ListBox.module.css b/packages/components/src/styles/ListBox.module.css index 75525ec05..aacad0233 100644 --- a/packages/components/src/styles/ListBox.module.css +++ b/packages/components/src/styles/ListBox.module.css @@ -4,6 +4,15 @@ .item { composes: item from './Menu.module.css'; + + &:has(.checkbox) { + align-items: start; + } + + & .checkbox { + height: 1lh; + align-items: center; + } } .content {