form-group

The <form-group /> component allows you to render another a component and his label.

Attributes

The following attributes (bindables) are available for this component.

attribute type default description
behavior string undefined The form behavior (horizontal, inline, etc)
element string 'input' The component to render (doesn't render element when empty)
type string 'text' The type of component to render (text, radio, ect...)
value string undefined The value of the element
name string '' The name of the element
label string '' The label of the element (doesn't render label when empty)
classes string '' Classes to add
labelClasses string '' Classes to be applied to the label container. (overrides defaultLabelClasses from config)
elementClasses string '' Classes to be applied to the element container (overrides defaultElementClasses from config)
state string undefined The state of the element, for instance "error"
error string undefined The error message to show (doesn't render error when empty)
message string undefined The message to show (doesn't render message when empty)
placeholder string '' A short hint that describes the expected value
readonly boolean false Specifies that the select should be read-only
disabled boolean false Specifies that the select should be disabled
autofocus boolean false Specifies to enable the autofocus of the select
required boolean false Make the select required
selectOptions array [] The available options (for "select" element)
optionLabel string 'name' Which attribute to show in the option (for "select" element)
multiple boolean false Make the select a multi-select block (for "select" element)
translate boolean true Enable/disable translation for the option label (for "select" element)
options object {} Options to pass to the input element

Examples

<form-group
  behavior="inline"
  label="My textbox"
  element="input"
  value="One"
  name="textbox">
</form-group>
<form-group
  behavior="horizontal"
  label="My select"
  element="select"
  value="Two"
  name="selector"
  select-options.bind="[{name: 'One'}, {name: 'Two'}]"
  option-label="name"
  message="Select a number"
  state="error">
</form-group>

results matching ""

    No results matching ""