Skip to content

fix(components): align multi-select ListBox checkbox to the primary line #1958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
sruthykumar wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

fix(components): align multi-select ListBox checkbox to the primary line #1958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c4308b
fix(components): align multi-select ListBox checkbox to the primary line
devin-ai-integration[bot] Jul 27, 2026
c3fc03d
fix(components): scope top-alignment to items with a checkbox
devin-ai-integration[bot] Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/listbox-checkbox-primary-line.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
2 changes: 1 addition & 1 deletion packages/components/src/ListBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const ListBoxItem = <T extends object>({ ref, ...props }: ListBoxItemProps<T>) =
<>
{selectionMode === 'multiple' && (
<div
className={checkboxStyles()}
className={checkboxStyles({ className: styles.checkbox })}
data-selected={isSelected || undefined}
data-disabled={isDisabled || undefined}
>
Expand Down
9 changes: 9 additions & 0 deletions packages/components/src/styles/ListBox.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@

.item {
composes: item from './Menu.module.css';

&:has(.checkbox) {
align-items: start;
}

& .checkbox {
height: 1lh;
align-items: center;
}
}

.content {
Expand Down
Loading