blue
View on GitHub

Text Input

A text input allows users to enter freeform text.

Usage

Light
Blue
Zoho Puvi 
<script>
	import { TextInput } from 'deskblocks';
</script>

<TextInput placeholder="Enter the value" />

Mandatory input

Light
Blue
Zoho Puvi 
<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.

Light
Blue
Zoho Puvi 
<!-- Left Icon -->
<TextInput value={15}>
	<Icon slot="left" icon={IconActivity} />
</TextInput>

<!-- Right Icon -->
<TextInput value={15}>
	<Icon slot="right" icon={IconActivity} />
</TextInput>

Help message

Light
Blue
Zoho Puvi
Answer to the Ultimate Question of Life, the Universe, and Everything 
<script>
	import { TextInput, FormHelpMessage } from 'deskblocks';
</script>

<div>
	<TextInput value={42} />
	<FormHelpMessage>
		Answer to the Ultimate Question of Life, the Universe, and Everything
	</FormHelpMessage>
</div>

Invalid state

Light
Blue
Zoho Puvi
Answer to the Ultimate Question of Life, the Universe, and Everything 
<script>
	import { TextInput, FormErrorMessage } from 'deskblocks';
</script>

<div>
	<TextInput invalid value={42} />
	<FormErrorMessage>
		Answer to the Ultimate Question of Life, the Universe, and Everything
	</FormErrorMessage>
</div>

Disabled state

Light
Blue
Zoho Puvi 
<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

Events