Inputs Reference

Complete reference for input components in Hypen.

Button

Clickable button.

Button { Text("Submit") }
    .onClick(@actions.submit)

Applicators:

• .onClick(action): Action to dispatch when clicked
• .disabled(bool): Disable the button

Input

Single-line text input.

Input(placeholder: "Enter text")
    .value(${state.text})
    .onInput(@actions.updateText)

Arguments:

• placeholder: Placeholder text

Applicators:

• .value(binding): Current value (state binding)
• .onInput(action): Action for text changes
• .onFocus(action): Action when focused
• .onBlur(action): Action when blurred
• .onKey(action): Action when Enter pressed

Textarea

Multi-line text input.

Textarea(placeholder: "Enter message")
    .value(${state.message})
    .onInput(@actions.updateMessage)
    .height(120)

Arguments/Applicators: Same as Input

Checkbox

Toggle checkbox.

Checkbox {}
    .checked(${state.agreed})
    .onChange(@actions.toggleAgreed)

Applicators:

• .checked(binding): Current checked state
• .onChange(action): Action when toggled

Switch

Toggle switch.

Switch {}
    .checked(${state.enabled})
    .onChange(@actions.toggleEnabled)

Applicators: Same as Checkbox

Select

Dropdown selection.

Select {}
    .value(${state.selected})
    .onChange(@actions.updateSelected)

Applicators:

• .value(binding): Current selected value
• .onChange(action): Action when selection changes

Slider

Range slider.

Slider {}
    .value(${state.volume})
    .onChange(@actions.updateVolume)

Applicators:

• .value(binding): Current value
• .onChange(action): Action when value changes
• .min(number): Minimum value (default: 0)
• .max(number): Maximum value (default: 100)