---
title: Input
description: A simple component for inputting text.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/input'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/input.md'
---

# Input

A simple component for inputting text.

#### Props

* **disabled**

  **boolean**

  Whether the input is disabled

* **innerRef**

  **React.Ref\<HTMLInputElement>**

  Ref to the input element (use instead of ref)

* **onChange**

  **React.ChangeEventHandler\<HTMLInputElement>**

  Change handler

* **placeholder**

  **string**

  Placeholder text

* **type**

  **string**

  Input type (text, email, password, etc.)

* **value**

  **string**

  Current value

Examples

## Preview

![input](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Input-5RlWEw42.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import {Input} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Input
        placeholder="Enter text..."
        value="This is an input"
        onChange={e => console.log(e.target.value)}
      />
    )
  }
  ```

* ####

  ##### Description

  An input with placeholder text

  ##### tsx

  ```tsx
  import {Input} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Input
        placeholder="Enter text..."
        value="This is an input"
        onChange={e => console.log(e.target.value)}
      />
    )
  }
  ```

* ####

  ##### Description

  An input with a preset value

  ##### tsx

  ```tsx
  import {Input} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return <Input value="This is an input" />
  }
  ```

* ####

  ##### Description

  A disabled input field

  ##### tsx

  ```tsx
  import {Input} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return <Input disabled value="Disabled input" />
  }
  ```

***