Input
A pill-shaped text field with a label, hint and error message. It is form-associated: its value is submitted with the surrounding <form> and it takes part in native validation.
<form style="display: grid; gap: 24px; max-width: 420px">
<hc-input label="Club name" name="club" placeholder="Hack Club @ Shelburne" hint="You can change this later." required></hc-input>
<hc-input label="Website" name="url" type="url" error="That doesn't look like a URL" value="hackclub"></hc-input>
<hc-button type="submit" arrow>Create club</hc-button>
</form>API
Attributes
| Name | Type | Description |
|---|---|---|
label | string | Visible label |
hide-label | boolean | Keep the label for screen readers only |
name, value, type, placeholder | string | Same as <input> |
autocomplete, inputmode, pattern, minlength, maxlength | Same as <input> | |
hint | string | Help text below the field |
error | string | Error message; marks the field invalid |
required, disabled, readonly | boolean | Same as <input> |
Events
| Name | Description |
|---|---|
input | Every keystroke |
change | When the value is committed |
CSS parts
| Name | Description |
|---|---|
label | |
input | |
hint | |
error |