v1.0

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 accessible attributes. This prefab ensures best practices without disrupting Framer's component creation flow.

Why use this prefab?

Creating a switch in Framer lacks native label support, role and required accessible attributes. This prefab ensures best practices without disrupting Framer's component creation flow.

Why use this prefab?

Creating a switch in Framer lacks native label support, role and required accessible attributes. This prefab ensures best practices without disrupting Framer's component creation flow.

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

How to use

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.

Accessbility considerations

Accessbility considerations

Accessbility considerations

When creating the component that will be used with this prefab consider the following:

When creating your component that will use this prefab ensure that there is sufficient contrast between the different states. Read more about required contrast to pass AA WCAG requirements

This prefab should be paired with a label. Use our label prefab to ensure that the prefab is clearly labeled and described to all users.

When using within a form be sure to include an error variant to ensure that when required the user is aware.

Properties

Properties

Properties

Property

Default

Description

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.

Events

Interactions

Supported events: inActive, active, error