Focus state on an element

Ask us anything How do I?
1

Will you be launching a new focus state?

I tried to do this with a custom css :focus state on an input border. However the css is applied to an inner element while the original css is applied to an outer ww-object. This makes the 2 styles clash rather than be over written.

If you won’t be launching this soon what is the best alternative option?

Thanks

Amar

2

Hey @amastar :wave:

I’ll check with the team asap. I think we have this in our roadmap, but I’ll double-check just in case and keep you posted.

3

The feature has been implemented, and is currently under QA on our side :slight_smile:

It will be available for input and button, do you have other element in mind?

4

Hi Aurelie & Team,
Is there an update on when we’ll be able to use the new onFocus state?
Thanks,
Jean

5

Hi @Jean :wave:

The button and input elements now recognize the focus state if you add it as a custom state on the element.

In the example below, we have a focus state on an input that changes the border color when a user navigates to the input:

CleanShot 2023-07-07 at 13.22.36@2x
CleanShot 2023-07-07 at 13.22.36@2x3434×1012 266 KB

1 Like
6

Thanks Joyce.

7

I would love ths to be available on the checkbox element. i want my users to be able to tab thru a checklist, which they can do but how do i make it so there’s a shadow when a checkbox in a collectino list is focused?

for the checkbox, currently i add a class to the targeted type, then append CSS on page load for it’s :focus-within and add the box shadow

8

@aurelie @Joyce Is there any update on this feature being released for the checkbox element? Thank you

9

No update on this. It’s on our radar but not yet prioritized

1 Like