Prefabs

Primitives

Library

Learn

Get full access

Prefabs

Copy Prefab

Copy Prefab

Copy Prefab

Switch

A switch is a control enabling users to toggle between a binary state (True or False).

Why use this prefab?

Creating a switch in Framer lacks native label support, role and required accessbile attributes. This prefab ensures accessibility best practices without disrupting Framer's component creation flow. It also unlocks the capability to use within a form.

Why use this prefab?

Creating a switch in Framer lacks native label support, role and required accessbile attributes. This prefab ensures accessibility best practices without disrupting Framer's component creation flow. It also unlocks the capability to use within a form.

Why use this prefab?

Creating a switch in Framer lacks native label support, role and required accessbile attributes. This prefab ensures accessibility best practices without disrupting Framer's component creation flow. It also unlocks the capability to use within a form.

Features

Features

Features

Uses framer events for transitions between variants

Use any framer component all styling done within framer canvas not in the code or sidebar.

Applies all accessible aria attributes to ensure everyone can interact with it.

Uses native HTML Form attribute to use within any form.

How to use

Create a framer component: Using framer create a component that will use this prefab.

Add prefab: Add the prefab to the component and connect the transitions to the matching variants states.

Nest prefab: Nest prefab to the parent frame. Set the prefab position to absolute. Keep in mind that the prefab will not show visually in preview or when publish.

Test: Test the component in preview and ensure that your transitions are working.

Done: That is it! You are all set to use this prefab.

Component properties

Property

Default

Description

Component

Instance

The native component that will connect to the switch prefab.

Default Active

Boolean

Determines if the checkbox is checked by default.

Required

Boolean

When a part of a form will require the user to check before submitting.

Name*

String

A name is needed in a form to correctly transmit data upon submission.

ID

String

The value that will populate the html id attribute.

Form ID

String

Allows you to associate this input with the form prefab.

A11Y

Object

Contains outline style properties for the prefab.

Events

Interactions

Supported events: inActive, active, error