Input
A text input component for forms and user data entry with built-in styling and accessibility features.
Your API key is encrypted and stored securely.
Usage
import { Input } from "@tulip-systems/core/components";<Input />Examples
Basic
Field
Use Field, FieldLabel, and FieldDescription to create an input with a label and description.
Choose a unique username for your account.
Field Group
Use FieldGroup to show multiple Field blocks and to build forms.
We'll send updates to this address.
Disabled
Use the disabled prop to disable the input. To style the disabled state, add the data-disabled
attribute to the Field component.
This field is currently disabled.
Invalid
Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the
data-invalid attribute to the Field component.
This field contains validation errors.
File
Use the type="file" prop to create a file input.
Select a picture to upload.
Inline
Use Field with orientation="horizontal" to create an inline input. Pair with Button to create
an input with a button.
Grid
Use a grid layout to place multiple inputs side by side.
Required
Use the required attribute to indicate required inputs.
This field must be filled out.
Badge
Use Badge in the label to highlight a recommended field.
Button Group
To add buttons to an input, use the ButtonGroup component. See the Button Group component for more
examples.
Form
A full form example with multiple inputs, a select, and a button.