Input

Allow users to enter text that will fit on a single line. This is the most basic form field.

Figma component (opens in new tab)Storybook documentation (opens in new tab)

Input

React

<Input id="input" label="Input" />

CSS

<div class="input">
  <label for="input" class="input_label">Input</label>
  <input type="text" id="input" class="input_control">
</div>

Usage

To follow user-centred design and GDPR best practices, we should only ask users for information we need. In that respect, all form fields of the Pallote component library are by default required.

For the CSS library, you do not need to add the required property to the form fields, it is added automatically with the javascript import.

Props

Type

Change the input type property.

Date

Email

Number

Telephone

Text

Time

React

<Input type="date" id="date" label="Date" />
<Input type="email" id="email" label="Email" />
<Input type="number" id="number" label="Number" />
<Input type="tel" id="tel" label="Telephone" />
<Input type="text" id="text" label="Text" />
<Input type="time" id="time" label="Time" />

CSS

<div class="input">
  <label for="date" class="input_label">Date</label>
  <input type="date" id="date" class="input_control">
</div>

<div class="input">
  <label for="email" class="input_label">Email</label>
  <input type="email" id="email" class="input_control">
</div>

<div class="input">
  <label for="number" class="input_label">Number</label>
  <input type="number" id="number" class="input_control">
</div>

<div class="input">
  <label for="tel" class="input_label">Telephone</label>
  <input type="tel" id="tel" class="input_control">
</div>

<div class="input">
  <label for="text" class="input_label">Text</label>
  <input type="text" id="text" class="input_control">
</div>

<div class="input">
  <label for="time" class="input_label">Time</label>
  <input type="time" id="time" class="input_control">
</div>

isFocused

Focus on a input on page load.

IsFocused

React

<Input id="focused" label="IsFocused" isFocused />

CSS

<div class="input input-focused">
  <label for="focused" class="input_label">Focused</label>
  <input type="text" id="focused" class="input_control">
</div>

Error

Notify users that the field has an error.

Error

React

<Input id="error" label="Error" error="This is the error message" />

CSS

<div class="input input-error">
  <label for="error" class="input_label">Error</label>
  <p class="input_error">This is the error message</p>
  <input type="text" id="error" class="input_control">
</div>

Disabled

Add this class to signal users the field is disabled.

Disabled

React

<Input id="disabled" label="Disabled" disabled />

CSS

<div class="input input-disabled">
  <label for="disabled" class="input_label">Disabled</label>
  <input type="text" id="disabled" class="input_control">
</div>

Optional

Optional

React

<Input id="optional" label="Optional" optional />

CSS

<div class="input input-optional">
  <label for="optional" class="input_label">Optional</label>
  <input type="text" id="optional" class="input_control">
</div>

Hint

Hint

This is a hint to give more details

React

<Input id="hint" label="Hint" hint="This is a hint to give more details" />

CSS

<div class="input">
  <label for="hint" class="input_label">Hint</label>
  <p class="input_hint">This is a hint to give more details</p>
  <input type="text" id="hint" class="input_control">
</div>

Dense

Reduce the font size and padding for a more compact appearance.

Dense

React

<Input id="dense" label="Dense" dense />

CSS

<div class="input input-dense">
  <label for="dense" class="input_label">Dense</label>
  <input type="text" id="dense" class="input_control">
</div>

HideLabel

Hide the label visually while keeping it accessible to screen readers.

Hidden Label

React

<Input id="hideLabel" label="Hidden Label" hideLabel placeholder="Label is hidden but accessible to screen readers" />

CSS

<div class="input">
  <label for="hideLabel" class="input_label sr-only">Hidden Label</label>
  <input type="text" id="hideLabel" class="input_control" placeholder="Label is hidden but accessible to screen readers">
</div>