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 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 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 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 label='Label' placeholder='Placeholder' isRequired name='example-input' />

Note

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