Fieldbook
Sign in

Inputs

Check draw toggle

A square checkbox whose checkmark draws itself stroke by stroke when checked, with a soft press and hover scale.

Using Check draw toggle

A square checkbox whose checkmark draws itself stroke by stroke when checked, with a soft press and hover scale.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: checked, size, variant, accentColor

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Checkmark draw checkbox
1934Checkmark draw checkboxInputsA square checkbox that answers a check by drawing a checkmark one stroke at a time, and shows a short dash instead when its state is only partly set.
Labeled checkbox
2375Labeled checkboxInputsA small square checkbox paired with a text label, shown plain, with helper text, disabled, and as a card that highlights its border when checked.
Tri-state checkbox
2787Tri-state checkboxInputsA checkbox with unchecked, checked and indeterminate states that fills solid in the accent color and swaps a check mark for a dash.
Checkbox motion lab
1933Checkbox motion labInputsA single oversized checkbox for tuning exactly how firmly it presses and how slowly its checkmark draws in.
Drawn check checkbox
2343Drawn check checkboxInputsA checkbox whose check mark draws itself stroke by stroke as the box fills with a solid accent color.
Settings Toggle Row
2017Settings Toggle RowInputsA labeled settings row ending in an on off switch whose thumb stretches under a press and springs back when it settles.