Form control
Features
- Flexible and composable components to layout form elements.
- Use hint text to give users clear guidance for data entry.
- Explain complex concepts or aid first-time users with help popovers.
- Automatically associate labels with Telescope form elements.
When to use
Use the Form control component to achieve consistency between layouts of various form elements and more easily ensure accessible forms. The component works in combination with all foundational Telescope form elements.
Examples
Label
The label of a form element should be clear and concise, ideally under three words. It should describe the value of the element and not what the user needs to do in order to fill it out properly.
If you're having trouble keeping label text short, consider using hint text.
Hiding the label
Never omit the label completely. In rare cases, you may want to hide the label visually. An example of this could be a search field placed near the top of a page, featuring a magnifying glass icon and/or a button labelled “Search”.
Hint text
Use hint text to give users clear guidance for data entry. Keep it brief and avoid repeating the label or other form details. If it feels redundant, try removing it. We keep help text above the input field to have the reading order match the visual order, which is needed for screen readers.
To explain complex concepts or aid first-time users, prefer help popovers.
Help popover
Use help popovers to aid first-time users or to clarify complex concepts. The help popover can contain interactive content and may be used to provide links for further information.
For information on how to properly fill a field, prefer hint text.
Error
Provide clear and helpful error messages that guide users toward a solution. Instead of merely stating the problem, ensure the message is specific and actionable. Avoid vague or shaming language.
Skeleton
Use a "skeleton" version of this component to display a loading state 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.
Best practices
Refer to our Forms guidelines for general advice on forms structure, validation, and more.
Related components
- Checkbox: A form element that enables users to make a binary choice (checked/unchecked).
- Checkbox group: A form element that enables users to select multiple values from a list of options.
- 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.
- Input: A form element that enables users to enter a single line of text.
- Radio group: A form element that enables users to select a single value from a list of options.
- Select: A form element that enables users to select a single or multiple values from a list of options.
- Textarea: A form element that enables users to enter text on multiple lines.