Inputcomponent
component
A simple component for inputting text. You can view the Storybook for more interactive examples.
Was this section helpful?
Input
import {Input} from '@shopify/shop-minis-react'
export default function MyComponent() {
return <Input placeholder="Enter text..." value="This is an input" />
}
examples
Input
import {Input} from '@shopify/shop-minis-react' export default function MyComponent() { return <Input placeholder="Enter text..." value="This is an input" /> }
Preview

Anchor to examplesExamples
Input states and configurations
Anchor to example-default-inputDefault input
An input with placeholder text
Anchor to example-input-with-valueInput with value
An input with a preset value
Anchor to example-disabled-inputDisabled input
A disabled input field
Was this section helpful?
Default input
import {Input} from '@shopify/shop-minis-react'
export default function MyComponent() {
return <Input placeholder="Enter text..." value="This is an input" />
}
examples
Default input
description
An input with placeholder text
import {Input} from '@shopify/shop-minis-react' export default function MyComponent() { return <Input placeholder="Enter text..." value="This is an input" /> }
Input with value
description
An input with a preset value
import {Input} from '@shopify/shop-minis-react' export default function MyComponent() { return <Input value="This is an input" /> }
Disabled input
description
A disabled input field
import {Input} from '@shopify/shop-minis-react' export default function MyComponent() { return <Input disabled value="Disabled input" /> }