Hypen Language Docs

Appearance

Inputs ​

Button ​

A Button is a clickable element used to perform an action. It can contain text, an icon, or both.

dart
Button {
  Text("Click me")
}
.action(@event)

Checkbox ​

A Checkbox allows users to select one or more options from a set.

dart
Checkbox(id: "option1", label: "Option 1", checked: true).onChecked(actionName)
Checkbox(id: "option2", label: "Option 2", checked: false).onChecked(actionName)

Radio ​

A Radio button allows users to select one option from a set, ensuring that no more than one option can be selected at a time.

dart
RadioGroup {
  RadioButton("option1", label: "Option 1")
  RadioButton("option2", label: "Option 2")
}

Toggle ​

A Toggle switch allows users to switch between two states or options. It is often used for settings that can be turned on or off.

dart
Toggle(id: "toggleOption", label: "Enable Feature")

Input ​

An Input field allows users to enter text. It can be used for various types of data input, such as names, email addresses, and passwords.

dart
Input(id: "email", placeholder: "Enter your email")

A Select dropdown allows users to choose one option from a list. It's useful for saving space on the screen while offering multiple selection options.

dart
Dropdown(id: "countrySelect") {
  Option("us", "United States")
  Option("ca", "Canada")
  Option("uk", "United Kingdom")
}

Datepicker ​

A Datepicker allows users to select a date from a calendar view. It simplifies the process of entering dates and ensures the format is consistent.

dart
Datepicker(id: "startDate", label: "Start Date")