Copy Prefab

Copy Prefab

Copy Prefab

Pro

Label

A accessible label associated with controls like inputs & switches.

Powered by

Why use this prefab?

Creating a label in Framer lacks native support, attributes. This prefab ensures accessibility best practices without disrupting Framer's component creation flow.

Why use this prefab?

Creating a label in Framer lacks native support, attributes. This prefab ensures accessibility best practices without disrupting Framer's component creation flow.

Why use this prefab?

Creating a label in Framer lacks native support, attributes. This prefab ensures accessibility best practices without disrupting Framer's component creation flow.

Features

Features

Features

How to use

Style the label: Using the properties panel style the label to match your designs.

Style the label: Using the properties panel style the label to match your designs.

Style the label: Using the properties panel style the label to match your designs.

Connect: Assign the htmlFor property to a control id. Be sure to match exactly for it to function correctly.

Connect: Assign the htmlFor property to a control id. Be sure to match exactly for it to function correctly.

Connect: Assign the htmlFor property to a control id. Be sure to match exactly for it to function correctly.

Nest in Component: The label can be used without nesting within a component, but it is best used nested within in one. Using framer variables you can tie the label htmlFor to the control id.

Nest in Component: The label can be used without nesting within a component, but it is best used nested within in one. Using framer variables you can tie the label htmlFor to the control id.

Nest in Component: The label can be used without nesting within a component, but it is best used nested within in one. Using framer variables you can tie the label htmlFor to the control id.

Set Tab index -1

Set the tabIndex of connected components to -1. This improves navigation for screen readers and keyboard users by avoiding unintended focus. By default framer sets all components to have tabIndex to 0.

Set Tab index -1

Set the tabIndex of connected components to -1. This improves navigation for screen readers and keyboard users by avoiding unintended focus. By default framer sets all components to have tabIndex to 0.

Set Tab index -1

Set the tabIndex of connected components to -1. This improves navigation for screen readers and keyboard users by avoiding unintended focus. By default framer sets all components to have tabIndex to 0.

Component properties

Property

Default

Description

htmlFor

String

The value that will identify what input it will be associated with.

Text

String

Text value for the label prefab.

Styles

Object

Contains all text styles to format the label as needed.