npm package: @licuido-ui/ui_mobile-input
Description: An input is a UI element that accepts text data from the user
Latest version: 3.0.11

# MobileInput

An input is a UI element that accepts text data from the user

### Author

- @author Hariharan <hariharan@crayond.co>

### Modified

- @modified Vengadesh Pandiyan <vengadesh@crayond.co>

## Link

[Story Book Link to MobileInput ](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_mobile-input
```

## Import component

```jsx
import { MobileInput } from '@licuido-ui/ui_mobile-input';
```

## Usage

```jsx
<MobileInput label={''} errorMessage={''} />
```

## Image

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

## Image

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

## Sample Code

```jsx
<MobileInput
  className={''}
  sx={{}}
  placeholder={'Enter mobile number'}
  required={false}
  label={''}
  onChange={console.log}
  fullWidth={true}
  autoFocus={true}
  readonly={false}
  disabled={false}
  value={{}}
  error={false}
  helperText={''}
  id={''}
  selectValu={{}}
  mobileInputStyle={{}}
  inputStyle={{}}
  dropDownStyle={{}}
  labelStyle={{}}
  helperTextStyle={{}}
  errorMessage={''}
  variant=''
/>
```

## Props

| **Name**              | **Description**                                                       | **Default** | **Control**                 |
| --------------------- | --------------------------------------------------------------------- | ----------- | --------------------------- |
| **id**                | This is unique and used to run BDD test and for applied `data-testid` | string      | string                      |
| **className**         | string                                                                | \-          |
| **sx**                | SxProps{}                                                             | \-          | RAWsx : \{\}                |
| **placeholder**       | string                                                                | \-          | Enter mobile number         |
| **required**          | boolean                                                               | \-          | False `or` True             |
| **label**             | string                                                                | \-          |
| **onChange**          | ()=>{}                                                                | \-          | \-                          |
| **fullWidth**         | boolean                                                               | \-          | False `or` True             |
| **autoFocus**         | boolean                                                               | \-          | False `or` True             |
| **readonly**          | boolean                                                               | \-          | False `or` True             |
| **disabled**          | boolean                                                               | \-          | False `or` True             |
| **value**             |                                                                       | \-          | RAWvalue : \{\}             |
| **error**             | boolean                                                               | \-          | False `or` True             |
| **helperText**        | string                                                                | \-          |                             |
| **id**                | string or number                                                      | \-          |                             |
| **selectValu**        |                                                                       | \-          | RAWselectValue : \{\}       |
| **mobileInputStyle**  | SxProps{}                                                             | \-          | RAWmobileInputStyle : \{\}  |
| **inputStyle**        | SxProps{}                                                             | \-          | RAWinputStyle : \{\}        |
| **dropDownStyle**     | SxProps{}                                                             | \-          | RAWdropDownStyle : \{\}     |
| **labelStyle**        | SxProps{}                                                             | \-          | RAWlabelStyle : \{\}        |
| **helperTextStyle**   | SxProps{}                                                             | \-          | RAWhelperTextStyle : \{\}   |
| **errorMessage**      | string                                                                | \-          |
| **variant**           | This Describes the variant of the Text Field                          | string      |
| **metanusInputStyle** | This Describes the Style Prop of the Text Field                       | object      | RAWmetanusInputStyle : \{\} |
| **countryCode**       | This Describes Country Code Prop Json                                 | array       | Array                       |
| **isFlagImg**         | boolean                                                               | \-          | False `or` True             |
| **borderRight**       | The right side border for dropdown                                    | string      | 1px solid #E9E9E9           |