Search
Usage notes
Search fields are used as search styled form fields.
Default
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label1" class="coral-Form-fieldlabel">Label</label>
<coral-search labelledby="label1"></coral-search>
</form>
With Value
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label2" class="coral-Form-fieldlabel">Label</label>
<coral-search labelledby="label2" name="ni12" value="test value"></coral-search>
</form>
With Placeholder
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label3" class="coral-Form-fieldlabel">Label</label>
<coral-search labelledby="label3" placeholder="Placeholder"></coral-search>
</form>
With Max Length
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label4" class="coral-Form-fieldlabel">Label</label>
<coral-search labelledby="label4" maxlength="10"></coral-search>
</form>
Quiet variant
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label5" class="coral-Form-fieldlabel">Label</label>
<coral-search labelledby="label5" placeholder="Placeholder" variant="quiet"></coral-search>
</form>
Disabled
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label6" class="coral-Form-fieldlabel">Label</label>
<coral-search labelledby="label6" disabled=""></coral-search>
</form>
Required
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label7" class="coral-Form-fieldlabel">Label</label>
<coral-search labelledby="label7" required=""></coral-search>
</form>
Form Field
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width: 300px">
<label id="label8" class="coral-Form-fieldlabel">Label</label>
<coral-search class="coral-Form-field" labelledby="label8"></coral-search>
</form>