# InputText

The InputText component is a fundamental UI element that allows users to enter and edit text. It is commonly used in forms, search fields, and data entry interfaces. This component ensures efficient user input handling, offering features like placeholder text, validation, and various input types.

## Overview

```tsx
import { InputText } from 'welcome-ui/InputText'

const Example = () => {
  return <InputText name="firstName" placeholder="Welcome" />
}

export default Example
```

## Examples

### Variants

Use `warning`, `danger`, or `success` properties to add a variant status on your input text.

```tsx
import { InputText } from 'welcome-ui/InputText'

const Example = () => {
  return (
    <>
      <InputText placeholder="Welcome" variant="warning" />
      <InputText placeholder="Welcome" variant="danger" />
      <InputText placeholder="Welcome" variant="success" />
    </>
  )
}

export default Example
```

### Disabled

Property `disabled` can be pass to the component or Field component

```tsx
import { Icon } from 'welcome-ui/Icon'
import { InputText } from 'welcome-ui/InputText'

const Example = () => {
  return (
    <div className="flex flex-col gap-md">
      <InputText disabled placeholder="Welcome" />
      <InputText
        disabled
        icon={<Icon name="user-circle" />}
        iconPlacement="right"
        placeholder="Welcome"
      />
    </div>
  )
}

export default Example
```

### Sizes

Use size property with option:

- `sm` (25px)
- `md` (33px)
- `lg` (43px - default)

```tsx
import { Icon } from 'welcome-ui/Icon'
import { InputText } from 'welcome-ui/InputText'

const Example = () => {
  return (
    <>
      <InputText icon={<Icon name="user-circle" />} placeholder="Welcome" />
      <InputText icon={<Icon name="user-circle" />} placeholder="Welcome" size="md" />
      <InputText icon={<Icon name="user-circle" />} placeholder="Welcome" size="sm" />
    </>
  )
}

export default Example
```

### Icon

Pass an `icon` through to decorate your `InputText`.

Use `iconPlacement` to put on left (default) or right.

```tsx
import { Icon } from 'welcome-ui/Icon'
import { InputText } from 'welcome-ui/InputText'

const Example = () => {
  return (
    <>
      <InputText icon={<Icon name="user-circle" />} placeholder="Welcome" />
      <InputText icon={<Icon name="user-circle" />} iconPlacement="right" placeholder="Welcome" />
      <InputText
        icon={<Icon name="user-circle" />}
        iconPlacement="right"
        isClearable
        placeholder="Welcome"
        size="md"
      />
    </>
  )
}

export default Example
```

### Clearable

Use the `isClearable` prop to add a cross button to remove the content (value) of the `TextInput`

```tsx
import { useState } from 'react'

import { Icon } from 'welcome-ui/Icon'
import { InputText } from 'welcome-ui/InputText'

const Example = () => {
  const [value, setValue] = useState('Welcome')
  return (
    <InputText
      icon={<Icon name="user-circle" />}
      iconPlacement="right"
      isClearable
      onChange={e => setValue(e.target.value)}
      placeholder="Welcome"
      value={value}
    />
  )
}

export default Example
```

### Transparent

Pass `transparent` to remove background-color and border-color. It can be combined with `variant` and `disabled`, and shows its border on hover and focus.

```tsx
import { Icon } from 'welcome-ui/Icon'
import { InputText } from 'welcome-ui/InputText'

const Example = () => {
  return (
    <div className="flex flex-col gap-md">
      <InputText icon={<Icon name="user-circle" />} placeholder="Welcome" transparent />
      <InputText placeholder="Welcome" transparent />
      <InputText placeholder="Welcome" transparent variant="warning" />
      <InputText placeholder="Welcome" transparent variant="danger" />
      <InputText placeholder="Welcome" transparent variant="success" />
      <InputText disabled placeholder="Welcome" transparent />
    </div>
  )
}

export default Example
```

## Props

### InputText

```tsx
interface InputTextProps {
  icon?: Element
  /** Default: left */
  iconPlacement?: 'left' | 'right'
  isClearable?: boolean
  /** Default: lg */
  size?: 'lg' | 'md' | 'sm'
  transparent?: boolean
  variant?: 'danger' | 'success' | 'warning'
}
```