Skip to content
Telescope

Input

An element used to create interactive controls for web-based forms in order to accept data from the user.

Features

  • Comes in bordered and underlined variants
  • Supports adding a postfix
  • Formik wrapper available

Examples

Variants

The variant prop modifies the component's appearance. Typically, use the default variant. Only use the underlined variant when the Input lacks a label and the default bordered variant would add significant visual clutter.

Postfix

Used to show e.g. a search icon or a currency inside the input.

Required

Use the isRequired property to programmatically (not visually) mark a checkbox as required. This sets aria-required="true" on the checkbox, which communicates to assistive technology (e.g. screen readers) that the checkbox is required.

Skeleton

The skeleton property is used to display a loading state for the component while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

Related components

  • Currency input: An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.
  • Date input: A means of inputting a date - either in a textfield or using a date picker interface.
  • Search: An input that allow users to find content by entering a search term.
  • Select: A form component used to select data from a list.
  • Textarea: A form element that allows users to enter text on multiple lines.