Text Input
A text input allows users to enter freeform text.
Usage
<script> import { TextInput } from 'deskblocks'; </script> <TextInput placeholder="Enter the value" />
Mandatory input
<script> import { TextInput, FormLabel } from 'deskblocks'; </script> <div> <FormLabel required for="inp-demo">Label</FormLabel> <TextInput required value="free form text" id="inp-demo" /> </div>
Input with icon
Pass the Icon component within the left
or right
slot to render it on the left or right side, respectively.
<!-- Left Icon --> <TextInput value={15}> <Icon slot="left-icon" icon={IconActivity} /> </TextInput> <!-- Right Icon --> <TextInput value={15}> <Icon slot="right-icon" icon={IconActivity} /> </TextInput>
Help message
<script> import { TextInput } from 'deskblocks'; </script> <div> <TextInput value={42}> <span slot="help-msg"> Answer to the Ultimate Question of Life, the Universe, and Everything </span> </TextInput> </div>
Invalid state
<script> import { TextInput } from 'deskblocks'; </script> <div> <TextInput invalid value={42}> <span slot="error-msg"> Answer to the Ultimate Question of Life, the Universe, and Everything </span> </TextInput> </div>
Disabled state
<TextInput disabled value={15} step={5} />
Props
id | string | undefined | Specifies a unique identifier for the input field. |
value | string | undefined | Sets the current value of the input field. |
placeholder | string | undefined | Provides placeholder text that appears when the input is empty. |
minlength | string | undefined | Specifies minimum number of characters required for input. |
maxlength | string | undefined | Specifies maximum number of characters allowed for input. |
pattern | string | undefined | Defines a regular expression that the input value must match for validation. |
name | string | undefined | Assigns a name to the input field, useful for form submissions. |
spellcheck | boolean | false | Enables or disables spellchecking for the input field. |
disabled | boolean | false | Disables the input field, preventing user interaction. |
invalid | boolean | false | Marks the input field as invalid, typically used for form validation. |
required | boolean | false | Indicates that the input field is required before form submission. |
readonly | boolean | false | Makes the input field read-only, preventing user modifications. |
class | string | undefined | Custom CSS class name for additional styling. |
Slots
left-icon
right-icon
Events
on:change
on:input
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keydown
on:keyup
on:focus
on:blur
on:paste