import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
import * as stories from './ExpressiveMoneyInput.test.story';

<Meta title="Forms/ExpressiveMoneyInput/Autofocus" />

# Autofocus

Setting `autofocus` to `true` will automatically focus the amount input field when the component is mounted.

> **Please note:** If this is enabled, and someone is navigating through the page via assistive technologies (e.g. keyboard), then they will skip any content beforehand and also may not have the currency selector announced (as it's placed before the money input). This can actually fail [WCAG 2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html) requirements in cases where the focused element isn't the first one. <br />Our recommendation is to only use this functionality sporadically and with careful consideration of the user experience.

<Canvas of={stories.WithAutofocus} />