<InputGroup> wraps a label, an input, and helper text into a single form field. The most-used component in @logisbase/ember-ui — every form is built from these.

`<InputGroup>`

<InputGroup> is the canonical way to lay out a labeled form field. It renders a label, an input, optional help text, and supports any custom input via a yielded block.

It is the most-used component in @logisbase/ember-ui — practically every form in the LogisBase Console is composed from these.

Basic Usage

<InputGroup
  @name='Email'
  @value={{this.email}}
  @type='email'
  @required={{true}}
/>

This renders:

A label with the text Email (and a required-marker if @required)
An <input type="email"> bound to this.email with placeholder="Email"

With a Custom Input

When you yield a block, the default <Input> is replaced with whatever you put inside. The block receives (id, name) as positional yields:

<InputGroup @name='Vehicle' as |id|>
  <ModelSelect
    @modelName='vehicle'
    @selectedModel={{this.vehicle}}
    @onChange={{fn (mut this.vehicle)}}
    id={{id}}
  />
</InputGroup>

This is how you compose InputGroup with Select, ModelSelect, PhoneInput, DatePicker, MoneyInput, and any other custom input — preserving the uniform label + spacing.

Arguments

Argument	Type	Default	Description
`@name`	string	—	The label text. Also used as the default `placeholder`
`@value`	any	—	Bound to the underlying `<Input>` (only when no block is given)
`@type`	string	`text`	HTML input type — `text`, `email`, `number`, `password`, etc.
`@placeholder`	string	falls back to `@name`	Input placeholder
`@required`	boolean	`false`	Adds the required marker to the label and `required` attribute on the input
`@disabled`	boolean	`false`	Disables the input
`@autocomplete`	string	—	Forwarded to the input
`@autofill`	string	—	Forwarded to the input
`@helpText`	string	—	Tooltip text shown next to the label
`@hideLabel`	boolean	`false`	Render the field without a visible label
`@inputClass`	string	—	Extra classes on the `<input>`
`@labelClass`	string	—	Extra classes on the `<label>`
`@labelWrapperClass`	string	—	Extra classes on the label wrapper
`@wrapperClass`	string	—	Extra classes on the outer `<div>`

Any additional ...attributes on <InputGroup> are forwarded to the underlying <Input> element.

Yielded Values

When you provide a block, <InputGroup> yields:

Position	Value	Use
1	`id`	Auto-generated unique ID — set on your custom input so the label's `for=` resolves
2	`@name`	The label text — useful as a placeholder

<InputGroup @name='Description' as |id name|>
  <textarea id={{id}} placeholder={{name}} class='form-input'></textarea>
</InputGroup>

Hidden Label (Inline Forms)

For dense forms where every field has an obvious context:

<InputGroup
  @name='Search'
  @hideLabel={{true}}
  @value={{this.q}}
  placeholder='Search drivers…'
/>

With Help Text

The help text is shown as a tooltip next to the label:

<InputGroup
  @name='Vehicle Plate'
  @value={{this.plate}}
  @helpText='Use the registered plate on file with the DMV'
  @required={{true}}
/>

Real-World Examples

{{! Simple text field }}
<InputGroup
  @name='First Name'
  @value={{this.driver.first_name}}
  @required={{true}}
/>

{{! Number field }}
<InputGroup
  @name='Maximum Capacity (kg)'
  @type='number'
  @value={{this.vehicle.max_capacity}}
/>

{{! Wrapping a Select }}
<InputGroup @name='Status'>
  <Select
    @value={{this.driver.status}}
    @options={{this.statusOptions}}
    @onSelect={{fn (mut this.driver.status)}}
  />
</InputGroup>

{{! Wrapping a custom widget }}
<InputGroup @name='Available Hours' as |id|>
  <ScheduleManager id={{id}} @value={{this.hours}} />
</InputGroup>

Source

File	Description
`addon/components/input-group.hbs`	Template
`addon/components/input-group.js`	Class

InputGroup

On this page