Search code examples
angularvmware-clarity

Clarity Forms - Place multiple input elements on same row

I am trying to use Clarity Forms to create something like below:

Design: Multi fields on same row

However, it looks like all the Clarity input elements when used within form gets wrapped into <clr-xxx-container> which has class clr-row applied to it. Thus, it seems impossible to place two input elements next to each other and take benefit of Clarity Form Elements.

Is my understanding correct or I am missing something?

My code looks like below:

   <form clrForm clrLayout="horizontal">
        <clr-input-container>
            <label>Disk Capacity</label>
            <input clrInput type="text" [(ngModel)]="model" name="example" required />

            <clr-control-helper>Disk capacity to add to VM</clr-control-helper>
            <clr-control-error>Error message that appears after focus is lost and control is invalid</clr-control-error>
        </clr-input-container>
        <select clrSelect name="options" [(ngModel)]="options">
            <option value="GB">GB</option>
            <option value="TB">TB</option>
            <option value="PB">PB</option>
        </select>
    </form>

StackBlitz: https://stackblitz.com/edit/clarity-v2-forms-issue

Solution

  • Clarity has the basic design, but not built-in Angular support for this yet. You will have to use the HTML/CSS version of the forms for this, because we haven't yet defined how to do built-in validation with multiple controls in the same line.

    See the demo source here: https://github.com/vmware/clarity/tree/master/src/dev/src/app/forms/input-group

    Long term, this is a feature request here: https://github.com/vmware/clarity/issues/3778