Field

Labels, controls and validation.

Default

Project name

<div class="<%= field_class %>">
  <label class="<%= field_label_class %>" for="example-0">Project name</label>
  <input id="example-0" class="<%= input_class %>" placeholder="Website redesign">
</div>

Validation

Amount

Enter a number.

<div class="<%= field_class %>">
  <label class="<%= field_label_class %>" for="example-1">Amount</label>
  <input id="example-1" class="<%= input_class %>" value="abc" aria-invalid="true" aria-describedby="example-1-error">
  <p id="example-1-error" class="pt-2 text-sm text-berry">Enter a number.</p>
</div>

Form actions

<div class="<%= form_actions_class %>">
  <button type="button" class="<%= button_class(variant: :ghost) %>">Cancel</button>
  <button type="button" class="<%= button_class(variant: :accent) %>">Save</button>
</div>

API reference

button_class

button_class(variant: :default, size: :base, block: false, extra: nil)

Parameter	Default	Values
variant	:default	:default · :accent · :secondary · :glass · :ghost · :danger
size	:base	:sm · :base · :lg · :nav
block	false	true · false
extra	nil	Additional Tailwind classes

input_class

input_class(size: :base, extra: nil)

Parameter	Default	Values
size	:base	:sm · :base · :lg
extra	nil	Additional Tailwind classes

field_class

field_class(extra: nil)

Parameter	Default	Values
extra	nil	Additional Tailwind classes

field_label_class

field_label_class(extra: nil)

Parameter	Default	Values
extra	nil	Additional Tailwind classes

form_actions_class

form_actions_class(extra: nil)

Parameter	Default	Values
extra	nil	Additional Tailwind classes