Is there a way to style :focus-visible state?

[o-t-w]

CSS has a :focus-visible selector. How am I supposed to style a Radix component for this state? For example, the checkbox shown in the documentation shows a black outline when clicked, which I do not want.

[manimovassagh]

You can style :focus-visible on Radix components using regular CSS — the state maps directly to the standard CSS pseudo-class.

With plain CSS:

/* Remove the default outline */
[data-radix-checkbox-root]:focus-visible {
  outline: none;
}

/* Or style it how you want */
[data-radix-checkbox-root]:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

With Tailwind:

<Checkbox.Root className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2">
  <Checkbox.Indicator>...</Checkbox.Indicator>
</Checkbox.Root>

With styled-components / CSS-in-JS:

const StyledCheckbox = styled(Checkbox.Root)`
  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #4f46e5;
  }
`;

The black outline you are seeing is the browser's default focus style. Radix primitives are intentionally unstyled, so it is up to you to override that default. Just target :focus-visible (not :focus) and you will only apply styles when keyboard navigation is used, not on mouse clicks.