<div cds-layout="vertical gap:lg">
<cds-input-group layout="vertical">
<label>Host URL</label>
<cds-select cds-layout="align:shrink">
<label>Protocol</label>
<select>
<option>http://</option>
<option>https://</option>
</select>
</cds-select>
<cds-input>
<label>Host Port</label>
<input placeholder="localhost:8000" type="url" />
<cds-control-action action="suffix" readonly aria-label="host status stable" title="host status stable">
<cds-icon shape="cloud" badge="success"></cds-icon>
</cds-control-action>
</cds-input>
<cds-control-message>Host ID: 123456</cds-control-message>
</cds-input-group>
<cds-input-group layout="vertical">
<label>Billing Limit</label>
<cds-input>
<label>Billing Limit</label>
<input placeholder="100.00" type="number" value="1987.56" />
<cds-control-action action="prefix" readonly>$</cds-control-action>
</cds-input>
<cds-select cds-layout="align:shrink">
<label>Currency</label>
<select>
<option>USD</option>
<option>EUR</option>
</select>
</cds-select>
<cds-control-message>Maximum host budget for billing period</cds-control-message>
</cds-input-group>
<cds-input-group layout="vertical" control-width="shrink">
<label>Schedule Deployment</label>
<cds-date>
<label>Date for deployment</label>
<input type="date" value="2018-07-22" />
</cds-date>
<cds-time>
<label>Time for deployment</label>
<input type="time" value="13:00" />
<datalist>
<option value="11:00"></option>
<option value="12:00"></option>
<option value="13:00"></option>
</datalist>
</cds-time>
<cds-select>
<label>Time Zone</label>
<select>
<option>PST</option>
<option>MST</option>
<option>CST</option>
<option>EST</option>
</select>
</cds-select>
<cds-control-message>The host deployment will trigger shortly after</cds-control-message>
</cds-input-group>
</div>