Input
ready

A customizable text input component for collecting user data with support for various input types, validation, and styling options.

Example

Selected Brand

View Storybook

Code

HTML

import { NbhdInput } from '@fbin-web/neighborhood-core';

<nbhd-input type="text" inputmode="text" name="the-input" form="id" id="id"
  help-text="This is some help text for the input." error-text="This is an error message for the input."
  title="the input" label="Form Label" autocomplete="off" spellcheck="true">
</nbhd-input>

React

import { NbhdInput } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdInput
      type="text"
      inputmode="text"
      name="the-input"
      form="id"
      id="id"
      title="the input"
      label="Form Label"
      helpText="This is some help text for the input."
      errorText="This is an error message for the input."
      autocomplete="off"
      spellcheck={true}></NbhdInput>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`surface`	`surface`	`none \| primary \| secondary \| inverse \| inverse-secondary`	`primary`	Sets the surface color treatment for the input.
`type`	`type`	`text \| date \| datetime-local \| tel \| number \| search \| email \| password`	`text`	The type of input element.
`inputmode`	`inputmode`	`none \| text \| decimal \| numeric \| tel \| search \| email \| url`		Hints at the type of data that might be entered for mobile keyboards.
`spellcheck`	`spellcheck`	`boolean`	`true`	Whether to enable spell checking.
`placeholder`	`placeholder`	`string`		Placeholder text displayed when the input is empty.
`value`	`value`	`string`		The current value of the input.
`name`	`name`	`string`		The name of the input for form submission.
`label`	`label`	`string`		The label text for the input.
`title`	`title`	`string`		The title attribute for the input.
`id`	`id`	`string`		The id of the input element.
`cssClass`	`css-class`	`string`		Additional CSS classes to apply to the input.
`ariaLabel`	`aria-label`	`string`		Descriptive text for additional context.
`errorText`	`error-text`	`string`		Error message text to display when invalid.
`helpText`	`help-text`	`string`		Help text to provide additional context.
`pattern`	`pattern`	`string`		Regular expression pattern for validation.
`maxlength`	`maxlength`	`number`		Maximum length of the input value.
`minlength`	`minlength`	`number`		Minimum length of the input value.
`max`	`max`	`number \| string`		Maximum value for number or date inputs.
`min`	`min`	`number \| string`		Minimum value for number or date inputs.
`invalid`	`invalid`	`boolean`	`false`	Marks the input as invalid for validation.
`disabled`	`disabled`	`boolean`	`false`	Disables the input.
`required`	`required`	`boolean`	`false`	Marks the input as required.
`autofocus`	`autofocus`	`boolean`	`false`	Automatically focuses the input when the page loads.
`readonly`	`readonly`	`boolean`	`false`	Makes the input read-only.
`autocomplete`	`autocomplete`	`string`		Controls browser autocomplete behavior.
`autocorrect`	`autocorrect`	`boolean`	`true`	Controls whether the browser may automatically correct input text.

Slots

Name	Description
`label`	Custom content for the input label. Defaults to the label property value.
`help`	Help text content displayed below the input when not in an invalid state.
`error`	Error message content displayed below the input when in an invalid state.

CSS Parts

Name	Description
`base`	The form control wrapper div.
`label`	The label element for the input.
`label-slot`	The slot element inside the label.
`label-text`	The text element that displays the label content.
`field`	The wrapper div containing the input element.
`input`	The input element.
`text`	The wrapper div for help and error text.
`help`	The help slot element.
`error`	The error slot element.

Dependencies

This component contains the following components as dependencies.

Text

Input ready