Input

A simple input component with support for easy labels and placeholders.

Usage

'Read the “', Usage, '” section'

Preview

Label

Code

InputExample.astro

---
import { Input } from 'studiocms:ui/components/input';
---

<Input label='Label' placeholder='Placeholder' />

Different types of inputs

'Read the “', Different types of inputs, '” section'

You can set the input’s type to like you would normally. Here’s a password input to show you how that’s done:

Preview

Label

Code

PasswordInputExample.astro

---
import { Input } from 'studiocms:ui/components/input';
---

<Input label='Label' placeholder='Placeholder' type='password' />

Disabled

'Read the “', Disabled, '” section'

You can disable the input altogether by using the disabled prop.

Preview

Label

Code

DisabledInputExample.astro

---
import { Input } from 'studiocms:ui/components/input';
---

<Input label='Label' placeholder='Placeholder' disabled />

Form Support

'Read the “', Form Support, '” section'

Inputs have full form support. You can use the isRequired and name attributes as needed.

The first one does what it says it does, while the latter sets the name attribute so you can access the input in, for example, the FormData returned by a submission. Here’s an example showing how to set both of them:

Preview

Label *

Code

FormInputExample.astro

---
import { Input } from 'studiocms:ui/components/input';
---

<Input label='Label' placeholder='Placeholder' isRequired name='example-input' />

Note

If no name is set, a random one is generated for the component.

Icons

'Read the “', Icons, '” section'

You can pass the name of an icon using the icon prop to display it inside of the input on the left side. To show the icon on the right hand side of the input, or explicitly set the position, pass an object to the icon prop containing the name and position of the icon:

Preview

Label

Code

IconsExample.astro

---
import { Input } from 'studiocms:ui/components/input';
---

<Input label='Label' placeholder='Placeholder' icon='heroicons:bolt-20-solid' />
<Input placeholder='Placeholder' icon={{ name: 'heroicons:bolt-20-solid', position: 'right' }} />

Description

'Read the “', Description, '” section'

You can add a description to be shown below the input by using the description prop:

Preview

Label

This is some text to help the user understand the input!

Code

DescriptionExample.astro

---
import { Input } from 'studiocms:ui/components/input';
---

<Input label='Label' placeholder='Placeholder' description='This is some text to help the user understand the input!' />