For the best experience, please view this on a larger device.

Select

The select component is an enhanced wrapper for Framer’s form select element. It adds additional functionality such as labels, help text, making dropdown selections more informative and visually appealing.

Features

Design

Dark Mode

Role

Please select your role

Properties Overview

label (String): The text label displayed above the select element.
helpText (String): Additional help text displayed below the select element to guide the user.
options (Array): Array of options for the select dropdown.
- label (String): Display text for the select option.
- value (String): Value associated with the select option.
defaultValue (String): The default selected value of the select element.

To integrate the CustomSelect component into your Framer project, use it within your design environment and configure the properties as needed.

Notes

Label and Help Text: Ensure the label and helpText properties provide clear descriptions to guide users.
Options Array: Use the options property to define the available choices in the select dropdown, with each option having a label and value.
Default Value: Set the defaultValue to pre-select an option when the component is rendered.