Skip to Content
DocsComponentsInput

Input

A brandless text input component. Accepts all standard HTML <input> attributes and works with any text-type variant: text, email, password, search, tel, url, number, date, time, and more.

Usage

import { Input } from '@froglet/ui'
 
<Input type="email" placeholder="you@example.com" />
 
// Themed
<Input className="input--brand" type="text" placeholder="Enter value..." />

Props

PropTypeDescription
classNamestringAdditional CSS classes. Use to apply a token block.
refReact.Ref<HTMLInputElement>Forwarded to the underlying <input>.
...propsInputHTMLAttributes<HTMLInputElement>All standard input attributes.

CSS Custom Properties

TokenDefaultDescription
--input-padding0.5rem 0.75remInner padding.
--input-border-width1pxBorder thickness.
--input-border-stylesolidBorder style.
--input-border-color—Border color (base).
--input-border-radius0Corner radius.
--input-font-size1remFont size.
--input-text-color—Text color.
--input-background-color—Background color.
--input-text-color-placeholder—Placeholder text color.
--input-border-color-hover—Border color on hover.
--input-background-color-hover—Background on hover.
--input-border-color-focus—Border color on focus.
--input-outline-width-focus2pxOutline width on focus.
--input-outline-color-focus—Outline color on focus.
--input-outline-offset-focus2pxOutline offset.
--input-border-color-disabled—Border color when disabled.
--input-text-color-disabled—Text color when disabled.
--input-background-color-disabled—Background when disabled.
--input-border-color-invalid—Border color on :invalid.

Accessibility

  • Renders as a semantic <input> with full keyboard support.
  • Always associate a visible label using a <label> element or aria-label.
  • Use required and aria-invalid to communicate validation state.
Last updated on
GridLabel