Simple Example
| NORMAL | |
| Destructive | |
| FILLED | |
| ERROR | |
| DISABLED | |
| SUCCESS | |
| WARNING | |
| WITH ICON | |
| WITH LABEL | |
| WITH ERROR MESSAGE | |
| WITH HELP TEXT | |
<nile-input placeholder="Type something"></nile-input>
<nile-input placeholder="Type something" destructive></nile-input>
<nile-input filled placeholder="Type something"></nile-input>
<nile-input error placeholder="Type something"></nile-input>
<nile-input disabled placeholder="Type something"></nile-input>
<nile-input success placeholder="Type something"></nile-input>
<nile-input warning placeholder="Type something"></nile-input>
<nile-input placeholder="Type something">
<nile-icon name="search" slot="suffix" size="14"></nile-icon>
</nile-input>
<nile-input label="Name" placeholder="Type something"></nile-input>
<nile-input placeholder="Type something" error-message="Something went wrong">
</nile-input>
<nile-input placeholder="Type something" help-text="I'm here to help you">
</nile-input>
Slots
| Name | Description |
|---|---|
| label | The input's label. Alternatively, you can use the label attribute. |
| prefix | Used to prepend a presentational icon or similar element to the input. |
| suffix | Used to append a presentational icon or similar element to the input. |
| clear-icon | An icon to use in lieu of the default clear icon. |
| show-password-icon | An icon to use in lieu of the default show password icon. |
| hide-password-icon | An icon to use in lieu of the default hide password icon. |
| help-text | Text that describes how to use the input. Alternatively, you can use the help-text attribute. |
Attributes & Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
| type | The type of input. Works the same as a native <input> element, but only a subset of types are supported. Defaults to text. | 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'text' | |
| name | The name of the input, submitted as a name/value pair with form data. | string | '' | |
| value | The current value of the input, submitted as a name/value pair with form data. | string | '' | |
| defaultValue (property only) |
The default value of the form control. Primarily used for resetting the form control. | string | '' | |
| size | The input's size. | 'small' | 'medium' | 'large' | 'medium' | |
| filled | Draws a filled input. | boolean | false | |
| pill | Draws a pill-style input with rounded edges. | boolean | false | |
| label | The input's label. If you need to display HTML, use the label slot instead. | string | '' | |
| helpText help-text |
The input's help text. If you need to display HTML, use the help-text slot instead. | string | '' | |
| clearable | Adds a clear button when the input is not empty. | boolean | false | |
| disabled | Disables the input. | boolean | false | |
| placeholder | Placeholder text to show as a hint when the input is empty. | string | '' | |
| readonly | Makes the input readonly. | boolean | false | |
| canSavePassword | Enables/Disables password copy and save | boolean | false | |
| passwordToggle password-toggle |
Adds a button to toggle the password's visibility. Only applies to password types. | boolean | false | |
| passwordVisible password-visible |
Determines whether or not the password is currently visible. Only applies to password input types. | boolean | false | |
| noSpinButtons no-spin-buttons |
Hides the browser's built-in increment/decrement spin buttons for number inputs. | boolean | false | |
| form | By default, form controls are associated with the nearest containing <form> element. This attribute allows you to place the form control outside of a form and associate it with the form that has this id. The form must be in the same document or shadow root for this to work. | string | '' | |
| required | Makes the input a required field. | boolean | false | |
| pattern | A regular expression pattern to validate input against. | string | - | |
| minlength | The minimum length of input that will be considered valid. | number | - | |
| maxlength | The maximum length of input that will be considered valid. | number | - | |
| min | The input's minimum value. Only applies to date and number input types. | number | string | - | |
| max | The input's maximum value. Only applies to date and number input types. | number | string | - | |
| step | Specifies the granularity that the value must adhere to, or the special value "any" which means no stepping is implied, allowing any numeric value. Only applies to date and number input types. | number | 'any' | - | |
| autocapitalize | Controls whether and how text input is automatically capitalized as it is entered by the user. | 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | - | |
| autocorrect | Indicates whether the browser's autocorrect feature is on or off. | 'off' | 'on' | - | |
| autocomplete | Specifies what permission the browser has to provide assistance in filling out form field values. | string | - | |
| autofocus | Indicates that the input should receive focus on page load. | boolean | - | |
| enterkeyhint | Used to customize the label or icon of the Enter key on virtual keyboards. | 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | - | |
| spellcheck | Enables spell checking on the input. | boolean | true | |
| inputmode | Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices. | 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | - | |
| valueAsDate (property only) |
Gets or sets the current value as a Date object. Returns null if the value can't be converted. | - | - | |
| valueAsNumber (property only) |
Gets or sets the current value as a number. Returns NaN if the value can't be converted. | - | - | |
| validity (property only) |
Gets the validity state object | - | - | |
| validationMessage (property only) |
Gets the validation message | - | - | |
| updateComplete | A read-only promise that resolves when the component has finished updating. | - | - |
Events
| Name | Description | Event Detail |
|---|---|---|
| nile-blur | Emitted when the control loses focus. | - |
| nile-change | Emitted when an alteration to the control's value is committed by the user. | - |
| nile-clear | Emitted when the clear button is activated. | - |
| nile-focus | Emitted when the control gains focus. | - |
| nile-input | Emitted when the control receives input. | - |
| nile-invalid | Emitted when the form control has been checked for validity and its constraints aren't satisfied. | - |
Methods
| Name | Description | Arguments |
|---|---|---|
| focus() | Sets focus on the input. | options: FocusOptions |
| blur() | Removes focus from the input. | - |
| select() | Selects all the text in the input. | - |
| setSelectionRange() | Sets the start and end positions of the text selection (0-based). | selectionStart: number, selectionEnd: number, selectionDirection: 'forward' | 'backward' | 'none' |
| setRangeText() | Replaces a range of text with a new string. | replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve' |
| showPicker() | Displays the browser picker for an input element (only works if the browser supports it for the input type). | - |
| stepUp() | Increments the value of a numeric input type by the value of the step attribute. | - |
| stepDown() | Decrements the value of a numeric input type by the value of the step attribute. | - |
| checkValidity() | Checks for validity but does not show a validation message. Returns true when valid and false when invalid. | - |
| getForm() | Gets the associated form, if one exists. | - |
| reportValidity() | Checks for validity and shows the browser's validation message if the control is invalid. | - |
| setCustomValidity() | Sets a custom validation message. Pass an empty string to restore validity. | message: string |
CSS Parts
| Name | Description |
|---|---|
| form-control | The form control that wraps the label, input, and help text. |
| form-control-label | The label's wrapper. |
| form-control-input | The input's wrapper. |
| form-control-help-text | The help text's wrapper. |
| base | The component's base wrapper. |
| input | The internal <input> control. |
| prefix | The container that wraps the prefix. |
| clear-button | The clear button. |
| password-toggle-button | The password toggle button. |
| suffix | The container that wraps the suffix. |
CSS Parts
This component automatically imports the following dependencies.
nile-icon