Input Focus Style

[eldo-xy]

How comes unlike shadcn, inputs have no focus styling? It's hard to easily see what input has focus?

[JaweedSaleem]

Does anyone have any answer to this?

[JaweedSaleem]

Thanks, it's just such a fundamental aesthetic. Will be great when your fix is in. Thanks again

[eldo-xy]

It's the main reason we didn't pick bbui recently for a project as it looks a bit unpolished without this as absurd as it may sound.

[JaweedSaleem]

I've gone with something else as well until this fix is in

[eldo-xy]

Hello @mathewtaylor any thoughts on this?

[mathewtaylor]

Hi @eldo-xy, yea this was not a design choice, just something missed. I will update now to being all the components in align.

[mathewtaylor]

You were right, and it was worse than it looked.

The inputs weren't merely under-styled — they set focus-visible:outline-none and drew nothing in its place. The browser's native focus ring was removed and never replaced, so a focused input was genuinely indistinguishable from an unfocused one. That's a WCAG 2.4.7 failure, not a taste question.

@HugoVG's read in this thread was exactly right: it didn't get in. BbButton, BbCheckbox, BbSwitch, BbTabs, BbToggle, BbSlider and BbCalendar had all been using focus-visible:ring-2 focus-visible:ring-ring since the beginning. The input family simply never got the same treatment, and BbTextarea had a third pattern of its own — so the library was giving three different answers to one question.

Fixed in #458, now on develop: BbInput, BbInputField, BbInputGroupInput, BbInputGroupTextarea, BbNumericInput (field and steppers), BbCurrencyInput, BbMaskedInput, BbCombobox, BbMultiSelect, BbSelectTrigger, BbNativeSelect, BbInputOTP, and BbTextarea brought in line.

One detail worth flagging if you're theming: the ring hugs the control rather than sitting offset like the buttons do. The offset version extends 4px and the form rows only leave a 3px gap under the label, so it was overlapping the label by a pixel on every labelled field. shadcn splits it the same way.

Not everything is done. #459 tracks 25 more components — BbCollapsibleTrigger, BbAccordionTrigger, the carousel arrows, breadcrumb links and others — that never styled focus at all and so fall back to the browser's default outline. That one's visible, so it passes WCAG; it's a consistency problem rather than an accessibility one, and it's marked good first issue if anyone fancies it.

I've also added convention tests (#460) that fail the build if a component removes the focus outline without providing an indicator, so this can't quietly come back.

Genuinely: thank you for being blunt about it costing you a project. That's more useful than a polite bug report, and it's the reason this got prioritised. The honest post-mortem is that it sat for two months because it lived in a discussion and never became an issue — so it was never on the board. That's on me, and #457 exists now partly to make sure the same thing doesn't happen to the next one.

Shipping in the next release.

[JaweedSaleem]

Thank you Mathew, this is excellent work and I can't wait to use your components, you guys have really done an amazing job.