Basic Input Components

Standard form controls. All accept the base props in addition to those listed.

Prop tables are auto-generated by npm run gen:docs from the zod schemas.

button

A clickable button with variants.

Prop	Type	Description
label	string	Button text
variant	"primary" | "secondary" | "ghost" | "danger"	Visual style
icon	string	Icon label (text only in v0.2)

button:
  label: "Save"
  variant: primary

button:
  label: "Delete account"
  variant: danger
  note: "Requires confirmation modal"

input

Single-line text input.

Prop	Type	Description
placeholder	string	Shown when empty
value	string	Pre-filled value

input:
  placeholder: "you@example.com"
  w: 280

textarea

Multi-line text input.

Prop	Type	Description
placeholder	string	Shown when empty
value	string	Pre-filled value
rows	number	Visible rows (affects height)

textarea:
  placeholder: "Write your feedback..."
  rows: 4

select

Dropdown picker.

Prop	Type	Description
placeholder	string	Shown when no value selected
value	string	Selected value
options	string[]	Available options

select:
  placeholder: "Select a country"
  value: "South Korea"
  options: ["United States", "South Korea", "Japan"]

checkbox

Single checkbox with a label.

Prop	Type	Description
label	string	Label next to the box
checked	boolean	Whether the box is ticked

checkbox:
  label: "I agree to the terms"
  checked: true

radio

Single radio button with a label. For a group, stack several in a col.

Prop	Type	Description
label	string	Label text
selected	boolean	Whether this radio is selected

col:
  items:
    - radio: { label: "Monthly",  selected: true }
    - radio: { label: "Annually", selected: false }
    - radio: { label: "Lifetime", selected: false }