import { Badge } from 'terra-form-input/package.json?dev-site-package';
import { Notice } from '@cerner/terra-docs';

import BlankExample from './common/BlankExample?dev-site-example';
import NumberInputExample from './common/NumberInputExample?dev-site-example';
import AccessibilityHooksExample from './common/AccessibilityHooksExample?dev-site-example';
import ControlledDefaultExample from './example/controlled/DefaultExample?dev-site-example';
import ControlledDisabledExample from './example/controlled/DisabledExample?dev-site-example';
import ControlledDefaultInvalidExample from './example/controlled/DefaultInvalidExample?dev-site-example';
import ControlledDefaultIncompleteExample from './example/controlled/DefaultIncompleteExample?dev-site-example';
import ControlledDisabledInvalidExample from './example/controlled/DisabledInvalidExample?dev-site-example';
import InputProgrammaticSet from './example/controlled/InputProgrammaticSet?dev-site-example';
import UncontrolledDefaultExample from './example/uncontrolled/DefaultExample?dev-site-example';
import UncontrolledDisabledExample from './example/uncontrolled/DisabledExample?dev-site-example';
import UncontrolledDefaultInvalidExample from './example/uncontrolled/DefaultInvalidExample?dev-site-example';
import UncontrolledDefaultIncompleteExample from './example/uncontrolled/DefaultIncompleteExample?dev-site-example';
import UncontrolledInvalidWithIncompleteExample from './example/uncontrolled/InvalidWithIncompleteExample?dev-site-example';
import UncontrolledDisabledInvalidExample from './example/uncontrolled/DisabledInvalidExample?dev-site-example';

import FormInputPropsTable from 'terra-form-input/lib/Input?dev-site-props-table';

<Badge />

# Terra Form Input

Generic input which represents an HTML input element directly.

**Note:** To follow [UX Best Practices](https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research), this component does not allow `placeholder`.

<Notice variant="caution" ariaLevel="3">

**Accessibility Bug:** Due to a bug in Chromium-based browsers (Chrome, Microsoft Edge, etc.), VoiceOver will read `<input type="number" />` incorrectly when incrementing or decrementing the value with keyboard shortcuts. Terra Form Input utilizes `<input type="number" />` when the `type` prop is set to "number" and will also have this screenreader issue. A recommended solution would be to instead use Terra Form Input with the `type` prop set to "text" and the added props of `inputmode` with a value of "numeric" and `pattern` with a regex expression that matches numeric values. For example:

 ```html
<Input type="text" inputmode="numeric" pattern="\d*" />
```

However, this will not have the built-in validity checks or keyboard commands that Terra Form Input with `type` prop equal to "number" provides. Consumers are responsible for adding this functionality.

</Notice>

## Getting Started

- Install with [npmjs](https://www.npmjs.com):

  ```bash
  npm install terra-form-input
  ```

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

```jsx
import Input from 'terra-form-input';
```

## Component Features

 * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
 * [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
 * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<BlankExample title="Default Input" />
<NumberInputExample title="Numeric Input" />
<AccessibilityHooksExample title="Accessibilty Hooks Input" />
<ControlledDefaultExample title="Controlled Example - Valid" />
<ControlledDisabledExample title="Controlled Example - Valid Disabled" />
<ControlledDefaultInvalidExample title="Controlled Example - Invalid" />
<ControlledDisabledInvalidExample title="Controlled Example - Invalid Disabled" />
<ControlledDefaultIncompleteExample title="Controlled Example - Incomplete" description="Applies theme-specific styling for incomplete, this controlled example shows a simple version of incomplete styling being removed after value is added. ***Note: Only use incomplete if given specific guidance, reserved for specific applications when no value has been provided. Not for general use.***" />
<InputProgrammaticSet />
<UncontrolledDefaultExample title="Uncontrolled Example - Valid" />
<UncontrolledDisabledExample title="Uncontrolled Example - Valid Disabled" />
<UncontrolledDefaultInvalidExample title="Uncontrolled Example - Invalid" />
<UncontrolledDisabledInvalidExample title="Uncontrolled Example - Invalid Disabled" />
<UncontrolledDefaultIncompleteExample title="Uncontrolled Example - Incomplete" description="Applies theme-specific styling for incomplete. ***Note: Only use incomplete if given specific guidance, reserved for specific applications when no value has been provided. Not for general use.***" />
<UncontrolledInvalidWithIncompleteExample title="Uncontrolled Example - Invalid And Incomplete With Invalid Taking Precedence" description="Applies theme-specific styling for incomplete and invalid, invalid-only styling displays taking precedence. ***Note: Only use incomplete if given specific guidance, reserved for specific applications when no value has been provided. Not for general use.***" />

## Form Input Props
<FormInputPropsTable />