Newed UI - Component Library

NWD Checkbox (Custom Marks/Shapes) v0.4.0

NWD Checkbox (Custom Marks/Shapes) is the checkbox Bubble was always missing. Built to replace the native checkbox, it offers far more styling flexibility than Bubble’s native element and brings full styling control, custom check mark styles, and click animations together in one polished component. Fully customizable through 20+ properties, giving you complete control over every visual and behavioral detail.

No data collected This plugin does not collect user data.

Live demoGet plugin
← All plugins

Key features 6

Custom Marks & Shapes

Five check icons and full control over size and border radius, from a square box to a perfect circle.

Full State Styling

Background, border and font colors set independently for the unchecked, hovered and checked states.

Smart Defaults & Validation

Preselect a value, mark the input as required, and style the invalid state without a single workflow.

Click Animations

Six animation styles on click, including bounce, elastic and pop, that respect the user's reduced motion setting.

Accessible Experience

Keyboard ready with Tab and Space, a visible focus ring, an accessible label and description, and reduced motion support.

Workflow Ready

Value changed event, Reset, Focus and Set value actions, and exposed states for the value, is clickable, is required, is valid and is focused.

How to use 3

  1. 01
    Insert the element on the page

    Place the plugin element wherever you need it.

  2. 02
    Configure the properties

    Adjust the settings to match your use case, including the label, the checkbox shape and size, the colors of each state, and the default value.

  3. 03
    Connect to your workflows

    Use the value changed event to react to the user, and read the exposed states to use the checked value anywhere in your app.

CHECKBOX 16

The label uses Bubble's native font properties. The properties in this section control the checkbox box itself and the label colors for each state.

Bubble's native font alignment moves the whole element, the control and its label together, not just the text. Turn on 'Stretch label to fill the line' and the label takes the rest of the line instead, pushing the control to the opposite edge, with the same native alignment positioning the text inside it. For anything beyond that, wrap the element in a group and align the group.

General

Checkbox label

text

Text shown next to the checkbox.

defaultCheckbox label

optional

Label placement

dropdown

Side of the label relative to the checkbox.

  • right
  • left

defaultright

Stretch label to fill the line?

checkbox

The label fills the rest of the line, pushing it to the edge opposite the control, and the native font alignment then positions the text inside it. If disabled, the label hugs the control and the native font alignment moves the whole component instead.

defaultno

Checkbox size

number

Size of the box, in pixels.

default18

Checkbox border radius

number

Corner radius of the box, in pixels.

default4

Click animation

dropdown

Animation played on the box when the checkbox is clicked.

  • none
  • bounce
  • elastic
  • jelly
  • pop
  • pulse

defaultbounce

Unchecked state

Checkbox bg color (unchecked)

color

Checkbox background color when unchecked.

default#FFFFFF

Checkbox border color (unchecked)

color

Checkbox border color when unchecked.

default#CACACA

Hovered state

Checkbox bg color (hovered)

color

Checkbox background color on hover, when the input is enabled.

default#FAFAFA

Checkbox border color (hovered)

color

Checkbox border color on hover, when the input is enabled.

default#30B3FE

Input font color (hovered)

color

Input font color on hover, when the input is enabled. Empty keeps the native font color.

defaultno default

optional

Checked state

Checkbox bg color (checked)

color

Checkbox background color when checked.

default#30B3FE

Checkbox border color (checked)

color

Checkbox border color when checked.

default#30B3FE

Input font color (checked)

color

Input font color when checked. Empty keeps the native font color.

defaultno default

optional

Check icon class

dropdown

Mark shown inside the checked box.

  • check
  • check bold
  • dash
  • cross
  • plus

defaultcheck

Check icon color

color

Color of the check mark.

default#FFFFFF

DEFAULT DATA 1

Default value

yes/no

Value applied on load and on reset. Yes means checked, no means unchecked.

defaultno

INPUT BEHAVIOR 7

Disabled state

This input is disabled?

yes/no

Disables the component, preventing any interaction.

defaultno

Input opacity (disabled)

number

Opacity applied to the checkbox when disabled, from 0 to 1. The checkbox keeps the colors of its current state, so a checked one still reads as checked. The label is not affected and uses Input font color (disabled).

default0.5

Input font color (disabled)

color

Input font color when disabled.

default#CACACA

Required state

This input is required?

yes/no

Marks the field as required and enables input validation.

defaultno

Input bg color (invalid)

color

Input background color when invalid (required with no value).

default#FFDEDE

Input border color (invalid)

color

Input border color when invalid (required with no value).

default#FF6666

Input font color (invalid)

color

Input font color when invalid (required with no value). Empty keeps the native font color.

defaultno default

optional

ACCESSIBILITY 2

Accessible label

text

Name read by screen readers. When empty, uses the placeholder or the visible label.

defaultno default

optional

Accessible description

text

Hint read by screen readers after the name. Empty for none.

defaultno default

optional

States 5

Values the element exposes for the rest of the page to read.

value (is checked)

yes/no

True when checked. Keeps the value while the element is hidden.

is clickable

yes/no

True when the component is not disabled.

is required

yes/no

True when the input is marked as required.

is valid

yes/no

True when the field is not required, or when it is required and has a valid value.

is focused

yes/no

True while the element has keyboard focus. Tab in sets it, and Tab out or a click outside clears it.

Events 1

Where a workflow can start.

value changed

event

Triggered when the checkbox is checked or unchecked, including by reset.

Actions 3

What a workflow can tell the element to do.

The actions can be triggered from any workflow event. The plugin also responds to Bubble's native reset actions (Reset a group/popup).

Reset no params

Restores the default value.

Focus no params

Focuses the checkbox.

Set value 1 param

Checks or unchecks the checkbox from a workflow.

Value

yes/no

New value (yes checks, no unchecks). Empty counts as no.

defaultno default

FAQ 4

Why use NWD Checkbox instead of the native Bubble checkbox?

The native checkbox offers almost no styling control: you cannot change the check mark, the shape, the hovered state or the animation, and its appearance drifts between browsers. This plugin renders its own box, so it looks the same everywhere and matches your design.

Does it require any advanced knowledge to set up?

No. Place the element on the page, configure the properties in the editor, and connect it to your workflows. All properties have descriptions and sensible defaults, so you can get started quickly without deep technical knowledge.

Can I focus or reset the component from a Bubble workflow?

Yes. The plugin exposes a Focus action and a Reset action, and it also responds to Bubble's native reset actions (Reset a group/popup). Both are ignored while the input is disabled.

Can I predefine styles and reuse them across multiple checkboxes?

Yes. The visual properties support Bubble's predefined styles, so the colors, the size, the border radius, the check icon and the animation can be saved once and reused on every checkbox in the app.