Input

The Input component lets you capture user information. It’s commonly used in forms and interfaces where users need to enter information like names, emails, or search queries.

Adding an Input

To add an Input to your page, follow these steps:

Open the Insert Menu and navigate to Components.

Click or drag the Input onto your desired location on the page.

Guides

Using Inputs in Forms

Inputs are most effective when used inside a form because it allows you to take advantage of built-in validation and data handling. For this purpose, use the Input Field component provided within form components.

To add an Input Field in a form:

Open the Insert Menu and navigate to Components.

Drag the Form component onto your page.

Remove any unneeded elements from the form.

With the form selected, open the Insert Menu again and choose the Input Field component within the form.

Label

Labels help screen readers and users understand what information an input requires.

To add a label to an input:

Open the Insert Menu and add a Label component.

Place the Input component inside the Label.

Position the Input above the Text element.

Use the Properties Panel to adjust the text style and spacing so the label clearly describes the input.

Disabled

To prevent users from interacting with an input:

Select the Input component.

Go to the Properties Panel.

Add the disabled property and set it to true.

Colors

You can change the color of your input to suit your design:

Select the Input component.

Navigate to the Properties Panel.

Adjust the background and border colors to match your style.

Sizes

To modify the size of your input:

Select the Input component.

Go to the Properties Panel.

Set the width and height to your desired dimensions.

Radius

To customize the roundness of your input's corners:

Select the Input component.

Navigate to the Properties Panel.

Adjust the border-radius setting to control how rounded the corners appear.

Adding Helper Text

You can add a description for input to provide additional information or guidance for users.

To add helper text:

Wrap the Input component in a Column.

Below the Input, add a Text element.

Use the Properties Panel to adjust the typography and spacing for clarity.

Properties

Property	Type	Default	Description
id	`string`	-	Unique identifier for the Input.
type*	`‘number’ \| ‘text’ \| ‘hidden' \| ‘email’ \| ‘password’`	`‘text’`	Specifies the type of data expected.
defaultValue	`string`	-	The default value of the input when it is first rendered.
disabled	`boolean`	`false`	If `true`, prevents the user from interacting with the input.
onChange	`Action`	-	Event handler triggered when the Input value changes.
placeholder	`string`	`‘Text’`	The placeholder text shown when the Input is empty.

Notes:

Not html attributes