DefaultFilterGroupRangeResponsiveWidth
<nve-input-group>
<label>domain</label>
<nve-select style="width: 130px">
<select aria-label="protocol">
<option>https://</option>
<option>http://</option>
</select>
</nve-select>
<nve-input>
<input placeholder="example" type="url" aria-label="host" />
<nve-button container="flat" readonly>.com</nve-button>
</nve-input>
<nve-control-message>host: 123456</nve-control-message>
</nve-input-group>
Edit Example
Visually combines many related input controls into a unified composite field with shared styling.
<div nve-layout="row align:vertical-center">
<nve-input-group>
<nve-select style="width: 150px">
<select aria-label="date type">
<option value="1">recording date</option>
<option value="2">process date</option>
</select>
</nve-select>
<nve-date style="width: 220px">
<nve-button container="flat" readonly>start</nve-button>
<input type="date" value="2022-05-11" aria-label="start date" />
</nve-date>
<nve-date style="width: 220px">
<nve-button container="flat" readonly>end</nve-button>
<input type="date" value="2022-12-07" aria-label="end date" />
</nve-date>
<nve-icon-button aria-label="remove filter" icon-name="cancel"></nve-icon-button>
</nve-input-group>
</div>
Edit Example
Input group with date range filters combining select and date inputs for filtering data by time periods.
<div nve-layout="row align:vertical-center" style="width: 700px">
<nve-input-group style="--width: 100%">
<label>domain</label>
<nve-select style="width: 130px">
<select aria-label="protocol">
<option>https://</option>
<option>http://</option>
</select>
</nve-select>
<nve-input nve-layout="full">
<input placeholder="example.com" type="url" aria-label="host" />
<nve-button container="flat" readonly>.com</nve-button>
</nve-input>
<nve-input style="width: 130px">
<input placeholder="Enter port" type="number" aria-label="port" />
</nve-input>
<nve-control-message>host: 123456</nve-control-message>
</nve-input-group>
</div>
Edit Example
Input group with children that grow to fill available space.