Skip to content
Telescope
Components

Input

A form element that enables users to enter a single line of text.

Basic usage

First, import the component.

import {Input} from '@pleo-io/telescope'

Then use it, like so:

<Input label="Expense category" name="expense-category" />

API reference

The component accepts the following props.

PropTypeDefault
disabled
boolean
innerRef
RefObject<HTMLInputElement>
isInvalid
boolean
false
isRequired
boolean
label
string
name*
string
postfix
enum
prefix
enum
renderError
Function
renderInput
function
skeleton
boolean
false
variant
enum
bordered

Examples

See the guidelines page for information around when and why to use the various options.

Required

To ensure accessibility, use the isRequired property (not the HTML required property) to mark a field as required for assistive technologies (such as screen readers).

Information:
Visually, you should mark the minority of fields in a form as "required" or "optional".
<FormControl maxWidth="240px">
    <FormControl.Label>Email (required)</FormControl.Label>
    <Input isRequired name="email" />
</FormControl>

Invalid

Use the isInvalid property to mark the field as invalid both visually (for sighted users) and for assistive technologies (such as screen readers).

Information:
Always provide a clear error message when marking a field as invalid.
<FormControl maxWidth="240px">
    <FormControl.Label>Email (required)</FormControl.Label>
    <Input isInvalid name="email" />
    <FormControl.Error>Enter your email</FormControl.Error>
</FormControl>

Advanced use cases

For advanced use cases and layouts, use this component in combination with our Form control component to maintain layout consistency and ensure form accessibility. The Form control supports features such as hint text, help popovers and error messages.

<FormControl maxWidth="240px">
    <FormControl.Label>Email</FormControl.Label>
    <Input name="email" value="jeppe@pleo.io" />
</FormControl>

Usage with Formik and Yup

For the sake of convenience, we provide a Formik version of this component. By using the `useField` hook it automatically handles value changes, blur events, error messages, and touched state for you. We recommend Yup for form validation.

Information:
The validation behaviour of the Formik component may not always be inline with those in our Form guidelines, so please review before usage.
<Formik
    initialValues={{name: ''}}
    onSubmit={(data) => alert(JSON.stringify(data, null, 2))}
    validationSchema={yup.object().shape({
        name: yup.string().required('Enter your name'),
    })}
>
    <Form>
        <Stack space={24}>
            <FormikInput label="Name" name="name" isRequired />
            <Button type="submit">Submit</Button>
        </Stack>
    </Form>
</Formik>

Customisation

If you need to build a custom input (a.g. a type of input that we do not currently provide and that is not achieveable with a simple abstraction around the Input) while still keeping it visually inline with the regular Input, we expose a BaseInput component for that purpose.

import {BaseInput} from '@pleo-io/telescope'

const StyledInput = styled(BaseInput)`
    &[type='date']::-webkit-inner-spin-button,
    &[type='date']::-webkit-calendar-picker-indicator {
        display: none;
        appearance: none;
    }
`

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

On this page