Fieldbook
Sign in

Inputs

Drawn check checkbox

A checkbox whose check mark draws itself stroke by stroke as the box fills with a solid accent color.

Using Drawn check checkbox

A checkbox whose check mark draws itself stroke by stroke as the box fills with a solid accent color.

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: label, checked, accentColor, drawDuration

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

Check draw toggle
1932Check draw toggleInputsA square checkbox whose checkmark draws itself stroke by stroke when checked, with a soft press and hover scale.
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.
Select All Checklist
1982Select All ChecklistInputsA parent checkbox that shows a dash when only some of its child items are checked, and a checkmark once every item is.
Settings toggle switch
2802Settings toggle switchInputsA small pill on/off switch with a sliding knob that flips a single setting, its track going from muted to a solid accent while the knob stretches like elastic if pressed mid-slide.
Sliding Thumb Switch
2433Sliding Thumb SwitchInputsAn on/off switch built from a hidden checkbox: a pill track that recolors and a round thumb that slides to the opposite edge.
Stacked option checklist
2782Stacked option checklistInputsA stacked list of labeled checkboxes that share one combined selection, with a running count of how many items are chosen.