Input

An accessible labeled native input, with optional hint and invalid/disabled states.

Install

npx ghostcn@1.4.0 add input --skip-existing

Usage

Place this field inside your own form. When supplying hint, provide a unique hintId for each instance. Use inputClass for the native control and class for the outer field.

{{> "components/input"
    label="Email address"
    type="email"
    name="email"
    hint="We will keep your email private."
    hintId="contact-email-hint"
}}

Component options

Parameter	Behavior
`variant`	Visual treatment; unknown values fall back to default. Values: `default`, `filled`. Default: `default`.
`size`	Component scale; unknown values fall back to default. Values: `sm`, `default`, `lg`. Default: `default`.
`label`	Visible accessible label. Default: `Input`.
`type`	Native input type. Values: `text`, `email`, `search`, `url`, `number`, `password`. Default: `text`.
`name`	Form field name.
`value`	Initial field value.
`placeholder`	Optional placeholder (not a label).
`hint`	Optional help text.
`hintId`	Unique ID for help text; provide with hint for aria-describedby.
`invalid`	Boolean invalid state.
`required`	Boolean required state.
`disabled`	Boolean disabled state.

Use unquoted booleans, for example true and false, rather than strings.

Customize this instance

{{> "components/input"
    label="Email address"
    type="email"
    name="email"
    hint="We will keep your email private."
    hintId="contact-email-hint"
    class="max-w-md" inputClass="rounded-xl border-purple-500"
}}

Styling parameters

Parameter	Target
`class`	Component root — `.ghcn-ui-field`
`labelClass`	`.ghcn-ui-field__label-text`
`inputClass`	`.ghcn-ui-field__input`
`descriptionClass`	`.ghcn-ui-field__hint`

Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.

Installed files

partials/components/input.hbs
assets/css/components/input.css

View the registry source

Input

InstallCopy Anchor Link

UsageCopy Anchor Link

Component optionsCopy Anchor Link

Customize this instanceCopy Anchor Link

Styling parametersCopy Anchor Link