Text Field

This component can be used to present text fields and other keyboard input fields such as passwords, emails, phone numbers or URLs.

Use the TextField component to render a text field.

import {TextField} from '@makigas/genshi-svelte';

<TextField
	label="User name"
	placeholder="Type your username"
	helper="Your username must have between 3 and 10 characters." />

User name

Additional types

This control can also be used to render the following types:

Passwords (type=“password”)
Email (type=“email”)
Number (type=“number”)
Telephone (type=“tel”)
URL (type=“url”)
Search (type=“search”)
Datetime (type=“datetime”)
Date (type=“date”)
Time (type=“time”)
Color (type=“color”)
File (type=“file”)

User name

Password

Episode count

SMS notifications

External URL

Filter records

Publish at

Creation date

Send notification at

Background color

Monospace

Add the mono prop to the component to render in monospace font.

User name

Your username must have between 3 and 10 characters

Disabled and read only

Add the disabled prop to disable the control.

User name

Add the readonly prop to make it read-only.

User name

Icons

You can use the iconBefore and iconAfter attributes to pass a Lucide component const to render it at the start or at the end of the field.

User bio

Message

Validation

You can add the validation prop to mark the field as valid or invalid with either the "valid" or "invalid" string. Absence of this prop will mark the field as default.

User name

Everything looks valid

User name

Username is already taken

Sizes

You can use the size prop to change the size of the component.

If you don’t want to use the default medium size, change it via the size parameter, which accepts one of the possible values in: xs sm md lg xl.

User name