Focus ring

A focus ring clearly indicates which item has keyboard focus.

#Default

Tab through these controls to see the ring. It is 2px solid #4688EC, offset by 2px, and it never shifts the layout.

Checkbox

import { Button, Checkbox } from '@wolf-rayet/react';

<Button>Button</Button>
<Button appearance="primary">Primary</Button>
<Checkbox label="Checkbox" />

#On inputs

A field draws the ring on its border rather than outside it.

import { TextField } from '@wolf-rayet/react';

<TextField id="focus-demo" defaultValue="Tab into this field" />