Textbox

A textbox allows users to input textual data into a form. They have multiple styles for short, single-line entries like names or email addresses, or multi-line content like messages or descriptions.

import * as UI from "@iyk/ui"

export default () => (
  <UI.Field name="name">
    <UI.Label>Name</UI.Label>

    <UI.Textbox />

    <UI.Validity />
  </UI.Field>
)

Type

The type attribute specifies the type of text control to render.

Text
For plain text.
Email
For email addresses, providing validation and relevant virtual keyboard controls
Number
For numbers, providing validation and relevant virtual numeric keyboard controls.
Password
For passwords whose value is obscured.
Search
For search queries, providing validation and relevant virtual keyboard controls.
Tel
For telephone numbers, providing validation and relevant virtual keypad keyboard controls.
Textarea
For plain, multi-line text.
Url
For URLs, providing validation and relevant virtual keyboard controls.

Field with Error

Please start with a capital letter. 
import * as UI from "@iyk/ui"

export default () => (
  <UI.Field name="name" validationMessage="Please start with a capital letter.">
    <UI.Label>Name</UI.Label>

    <UI.Textbox
      minLength={2}
      validate={(input) => {
        if (!/^[A-Z]/.test(input.value)) {
          return "Please start with a capital letter."
        }

        if (/\!/.test(input.value)) {
          return "Please don’t shout."
        }
      }}
    />

    <UI.Validity />
  </UI.Field>
)