Input

A simple component for inputting text.

Anchor to propsProps

Anchor to disabled disabled boolean: Whether the input is disabled
Anchor to innerRef innerRef React.Ref<HTMLInputElement>: Ref to the input element (use instead of ref)
Anchor to onChange onChange React.ChangeEventHandler<HTMLInputElement>: Change handler
Anchor to placeholder placeholder string: Placeholder text
Anchor to type type string: Input type (text, email, password, etc.)
Anchor to value value string: Current value

Examples

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)}

)

}

Preview

Examples

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

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

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

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

Description

A disabled input field

tsx

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

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

Was this page helpful?