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

import InputFieldExample from './example/InputField?dev-site-example';
import InlineLabelField from './example/InlineLabelField?dev-site-example';
import RequiredInputFieldExample from './example/RequiredInputField?dev-site-example';
import IncompleteInputFieldExample from './example/IncompleteInputField?dev-site-example';
import NumberInputFieldExample from './example/NumberInputField?dev-site-example';

import FormInputFieldPropsTable from 'terra-form-input/lib/InputField?dev-site-props-table';

<Badge />

# Terra Form Input Field

[terra-form-input](https://github.com/cerner/terra-core/tree/main/packages/terra-form-input) component that is wrapped inside a
[terra-form-field](https://github.com/cerner/terra-core/tree/main/packages/terra-form-field) component.

**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`.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-form-input`

## Usage

```jsx
import { InputField } 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)
 * [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)

## Examples
<InputFieldExample />
<RequiredInputFieldExample />
<IncompleteInputFieldExample 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.***" />
<NumberInputFieldExample />
<InlineLabelField title="Input Field with Inline Label"/>

## Form Input Field Props
<FormInputFieldPropsTable />