npm package: @licuido-ui/ui_input-field
Description: Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses
Latest version: 4.0.3

# InputField

Input fields are an essential user interface design element, providing users with the means to enter non-standardized responses

### Author Input

- @author Hariharan <hariharan@crayond.co>

### Author Add Filled Variant Input
- @author Thilagaraj <thilag@crayond.co>

## Link

[Story Book Link InputField ](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_input-field
```

## Import component

```jsx
import { InputField } from '@licuido-ui/ui_input-field';
```

## Usage

```jsx
<InputField label={'input'} value={''} />
```


## Image

![alt text](./inputFeild.png)

## Sample Code
```jsx
<InputField 
    fullWidth={true}
    variant={'outlined'}
    size={'small'}
    label={''}
    type={'text'}
    id={''}
    value={''}
    rowMax={Infinity}
    rowMin={1}
    isError={''}
    disabled={false}
    fullwidth={false}
    isMulti={false}
    isReadOnly={false}
    helperText={''}
    placeholder={''}
    className={''}
    endAdornment={null}
    defaultValue={null}
    inLineStyles={{}}
    startAdornments={null}
    onChange={undefined}  
  />

```
| **Prop**               | **Type**         | **Description**                                                                                             | **Default**              |
| ---------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------ |
| **inputId**            | `string`         | This id is unique.                                                                                          | -                        |
| **label**              | `string          | undefined`                                                                                                  | To change label text.    | `''`                                                                        |
| **value**              | `unknown`        | The input value. Providing an empty string will select no options.                                          | -                        |
| **className**          | `string`         | Override or extend the styles applied.                                                                      | `''`                     |
| **sx**                 | `SxProps<Theme>` | Allows defining system overrides as well as additional CSS styles.                                          | `{}`                     |
| **variant**            | `'outlined'      | 'standard'                                                                                                  | 'filled'`                | To change declare variant types.                                            | `'outlined'` |
| **labelStyle**         | `SxProps`        | Allows defining system overrides as well as additional CSS styles for the label.                            | See `defaultProps`       |
| **labelVariant**       | `'standard'      | 'floating'`                                                                                                 | To change label variant. | `'standard'`                                                                |
| **errorMessage**       | `string`         | To change error message text.                                                                               | -                        |
| **inputStyle**         | `SxProps`        | Allows defining system overrides as well as additional CSS styles for the input.                            | -                        |
| **isLabelRequired**    | `boolean`        | If true, the label is required.                                                                             | `true`                   |
| **isErrorRequired**    | `boolean`        | If true, the error message is required.                                                                     | `true`                   |
| **borderFilled**       | `string`         | If can you change a `borderFilled`, the `borderFilled` is required.                                         | `'1px solid'`            |
| **borderColorFilled**  | `string`         | If can you change a `borderColorFilled`, the `borderColorFilled` is required.                               | `'#D9DBDD'`              |
| **borderRadiusFilled** | `string`         | If can you change a `borderRadiusFilled`, the `borderRadiusFilled` is required.                             | `'8px'`                  |
| **filledHeight**       | `string`         | If can you change a `filledHeight`, the `filledHeight` is required. It can be used as a string.             | `'62px'`                 |
| **filledLabelPadding** | `string`         | If can you change a `filledLabelPadding`, the `filledLabelPadding` is required. It can be used as a string. | `'4px'`                  |
| **fontSizeFilled**     | `string`         | If can you change a `fontSizeFilled`, the `fontSizeFilled` is required.                                     | `'14px'`                 |
| **fontWeightFilled**   | `number          | string                                                                                                      | undefined`               | If can you change a `fontWeightFilled`, the `fontWeightFilled` is required. | `500`        |
| **errorStyle**         | `SxProps`        | Allows defining system overrides as well as additional CSS styles for the error message.                    | See `defaultProps`       |
| **errorVariant**       | `string`         | If can you change a Variant, the errorVariant is required                                                   | `caption`                |

**Default Props:**

```jsx
{
  label: '',
  type: 'text',
  variant: 'outlined',
  inputId: 'InputField',
  value: '',
  size: undefined,
  className: '',
  labelStyle: {
    'fontSize': '12px',
    'marginRight': '5px',
    'marginBottom': '8px',
    'color': '#3B3B3B',
    'fontWeight': 400,
    'lineHeight': '20px',
    '& span': {
      color: '#F44F5A',
    },
  },
  errorStyle: {
    'mt': 0.5,
    'mb': 0,
    'caret-color': 'transparent',
  },
  borderFilled: '1px solid',
  borderColorFilled: '#D9DBDD',
  borderRadiusFilled: '8px',
  filledHeight: '62px',
  filledLabelPadding: '4px',
  fontWeightFilled: 500,
  fontSizeFilled: '14px',
  labelVariant: 'standard',
  errorMessage: '',
}