## SignetTextInput Properties | Property | Attribute | Description | Type | Default | | ----------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | -------------------------------- | | `autocomplete` | `autocomplete` | Indicates whether the value of the control can be automatically completed by the browser. | `"off" \| "on"` | `"off"` | | `buttonText` | `button-text` | | `string` | `""` | | `clearable` | `clearable` | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. | `boolean` | `false` | | `configAria` | `config-aria` | | `any` | `{}` | | `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `signetChange` event after each keystroke. | `number` | `300` | | `disabled` | `disabled` | If true, the user cannot interact with the button. Defaults to `false`. | `boolean` | `false` | | `hasButton` | `has-button` | | `boolean` | `false` | | `label` | `label` | | `string` | `""` | | `modelValue` | `model-value` | | `string` | `undefined` | | `name` | `name` | The input field name. | `string` | `` `signet-input-${this.gid}` `` | | `placeholder` | `placeholder` | | `string` | `""` | | `readonly` | `readonly` | If true, the user read the value cannot modify it. Defaults to `false`. | `boolean` | `false` | | `required` | `required` | If true, required icon is show. Defaults to `false`. | `boolean` | `false` | | `requiredAsteriskColor` | `required-asterisk-color` | The color of the required asterisk in the label. Defaults to 'red'. | `string` | `'red'` | | `size` | `size` | The input field size. Possible values are: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`. | `"large" \| "lg" \| "md" \| "medium" \| "sm" \| "small"` | `'md'` | | `state` | `state` | The input state. Possible values are: `"success"`, `"error"`, `"warning"`, 'default'. Defaults to `"default"`. | `"default" \| "error" \| "success" \| "warning"` | `"default"` | | `type` | `type` | The type of control to display. Possible values are: `"text"`, `"password"`, `"number"`, `"email"`, `"tel"`. Defaults to `"text"`. | `"email" \| "number" \| "password" \| "tel" \| "text"` | `"text"` | | `value` | `value` | The input field value. | `string` | `""` | ## SignetTextInput Events | Event | Description | Type | | -------------- | --------------------------------------- | ------------------ | | `signetBlur` | Emitted when the input loses focus. | `CustomEvent` | | `signetChange` | Emitted when the value has changed. | `CustomEvent` | | `signetFocus` | Emitted when the input has focus. | `CustomEvent` | | `signetInput` | Emitted when a keyboard input occurred. | `CustomEvent` | ## SignetTextInput Methods ### `getComponentId() => Promise` #### Returns Type: `Promise` ### `setBlur() => Promise` Sets blur on the native `input` in `signet-input`. Use this method instead of the global `input.blur()`. #### Returns Type: `Promise` ### `setFocus() => Promise` Sets focus on the native `input` in `signet-input`. Use this method instead of the global `input.focus()`. #### Returns Type: `Promise` ## Dependencies ### Used by - [datagrid-filter-dropdown-logic](../datagrid-filters) - [datagrid-filter-text-input](../datagrid-filters) - [datagrid-search-text-input](../datagrid-filters) ### Graph ```mermaid graph TD; datagrid-filter-dropdown-logic --> signet-input datagrid-filter-text-input --> signet-input datagrid-search-text-input --> signet-input style signet-input fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- *Built with Signet Design System*