# InputIcon

> `InputIcon` is part of the Forms set, imported from `@jcsoftdev/ui/forms`.

Source: https://ui.jcsoftdev.com/docs/components/input-icon

`InputIcon` is part of the Forms set, imported from `@jcsoftdev/ui/forms`.

## Import

```ts
import { InputIcon } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/input-icon`.

## Usage

```tsx
<InputIcon
  icon={<Search />}
  placeholder="Buscar cliente o servicio"
  aria-label="Buscar"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` * | `ReactNode` |  | Leading icon element (e.g. a lucide-react icon). |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/forms-inputicon--default)
- [Telephone](/storybook/?path=/story/forms-inputicon--telephone)
- [Invalid](/storybook/?path=/story/forms-inputicon--invalid)
- [Disabled](/storybook/?path=/story/forms-inputicon--disabled)

## Source

`packages/ui/src/forms/input-icon/input-icon.tsx`