title: Input
name: input
variants:
  - name: value
    title: With value
    notes: |
      Sample input with text content. Inputs can have pre-filled content that people can edit.
  - name: hover
    title: Hover*
    notes: |
      *For previewing purposes only. **Do not use in production!*** \
      *Represents the input when the mouse cursor hovers the component.*
  - name: focus
    title: Focus*
    notes: |
      *For previewing purposes only. **Do not use in production!*** \
      *Represents the input when you are editing the content inside the component.*
  - name: error
    title: Error
    notes: |
      The style to display when you perform validation in a form and that an error appears.
  - name: disabled
    title: Disabled
    notes: |
      You cannot edit the input content. A use case can be you want to show the entered content without allowing people to edit it.
notes: |
  The input atom is the solution when you need people to submit text content. Inputs serve for search fields, forms, newsletter subscriptions, etc.

  ### Placeholder only
  The basic component, a box with a placeholder text.