WoozieComponents
Interactive Components
Buttons, inputs, selects, toggles, checkboxes, radios, sliders, and dropdowns.
Interactive Components
Form controls and interactive elements. These are the things users click, type into, and toggle.
button / btn
The workhorse. Comes in different variants, colors, and sizes.
button "Click Me"
button "Primary" [variant=solid, color=primary]
button "Outlined" [variant=outline, color=success]
button "Ghost" [variant=ghost]
button "Small" [size=sm]
button "Large" [size=lg]| Attribute | Values | Default |
|---|---|---|
variant | solid, outline, ghost | solid |
color | primary, success, warning, danger | primary |
size | sm, md, lg | md |
page | Page name — clicking navigates there | -- |
modal | Modal ID — clicking opens that modal | -- |
input
A text input field. The quoted text becomes the placeholder.
input "Enter your name"
input "you@email.com" [type=email]| Attribute | Values |
|---|---|
type | text, email, password, number, url |
textarea
A multi-line text input.
textarea "Write your message..."
textarea "Bio" [rows=6]select + option
A dropdown select menu.
select:
option "United States"
option "Canada"
option "United Kingdom"toggle
An on/off switch with a label.
toggle "Dark Mode"
toggle "Notifications"checkbox
A checkbox with a label next to it.
checkbox "I agree to the terms"
checkbox "Subscribe to newsletter"radio
Radio buttons. Group them with the name attribute so only one can be selected.
radio "Option A" [name=choice]
radio "Option B" [name=choice]
radio "Option C" [name=choice]slider
A range slider. The quoted text is the default value.
slider "50"
slider "75" [min=0, max=100]dropdown
A dropdown menu. The first child is the trigger button; the rest are the menu items.
dropdown:
button "Menu" [variant=outline]
link "Profile" [href=#]
link "Settings" [href=#]
link "Logout" [href=#]