Inputs should be used in instances where we require users to enter information that requires explanation or context. These usages tend to be more complex and therefore require structured inputs with a variety of contextual info.

Input only

<Input placeholder="Your offer" />

Input + Title

Your offer

<Input placeholder="$2,500" title="Your offer" />

Input + Title + Required

Your offer*

<Input placeholder="$2,500" required title="Your offer" />

Input + Title + Description

Your offer

Agree on a price with the seller.

<Input
  description="Agree on a price with the seller."
  placeholder="$2,500"
  title="Your offer"
/>

Input with error

Your offer

Agree on a price with the seller.

Something went wrong.

<Input
  description="Agree on a price with the seller."
  error="Something went wrong."
  placeholder="$2,500"
  title="Your offer"
/>

Disabled Input

Your offer

Agree on a price with the seller.

<Input
  description="Agree on a price with the seller."
  disabled
  placeholder="$2,500"
  title="Your offer"
/>

Input with specified width

Your offer

<Input width="50%" title="Your offer" />

On this page

Input only

Input + Title

Input + Title + Required

Input + Title + Description

Input with error

Disabled Input

Input with specified width