Skip to content
Telescope
Components

Form control

Form control displays a labelled input and, optionally, associated validation text, help popover, and/or hint text.

Basic usage

First, import the component.

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

Then use it like so:

API reference

The component accepts the following props.

PropTypeDefault
children*
React.ReactNode
className
string
maxWidth
string
skeleton
boolean
false

Label

PropTypeDefault
children*
React.ReactNode
className
string
htmlFor
string

Label wrapper

PropTypeDefault
children*
React.ReactNode
className
string

Hint text

PropTypeDefault
children*
React.ReactNode
className
string
id
string

Help

PropTypeDefault
aria-labelledby
string
children*
enum
className
string
skeleton
boolean
false

Error

This component doesn't accept any custom props.

Checkbox group

Use the FormControl.CheckboxGroup component to group multiple radio buttons together. Using this component will apply standardised spacing to the checkboxes and their labels which is aligned with the rest of the form controls.

This component doesn't accept any custom props.

Radio group

Use the FormControl.RadioGroup component to group multiple radio buttons together. Using this component will apply standardised spacing to the radio buttons and their labels which is aligned with the rest of the form controls.

PropTypeDefault
children*
enum
defaultValue
string
onValueChange*
function
value
string

Examples

Using custom input elements

Information:

When rendering an input other than a form component from Telescope, you must manually pass the attributes that make the form control accessible:

  • The input should have an ID
  • FormControl.Label should be associated with the text input by using htmlFor
  • If there is a hint text, the input should be associated with the hint text by passing the message's ID to aria-describedby
  • If the input's value is invalid, aria-invalid should be passed to the input.

Showing custom label content

If you have a need to show a help popover and/or other supplementary content next to a label, wrap the label in our LabelWrapper component. An example would be to disable an input field (feature) that requires a user to upgrade their account to enable it.

On this page