Input
ready

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

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdInput } from '@fbin-web/neighborhood-core';
<nbhd-input type="text" inputmode="text" name="the-input" form="id" id="id" 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"
      autocomplete="off"
      spellcheck={true}></NbhdInput>
  </>
);

Properties

Property Attribute Type Default Description
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.
dark dark boolean false Applies dark theme styling to the input.
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.

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.

CSS Properties

Property Default Value
--nbhd-input-borderColor var(--nbhd-color-gray)
--nbhd-input-backgroundColor var(--nbhd-color-white)
--nbhd-input-borderStyle solid
--nbhd-input-borderWidth var(--nbhd-space-025)
--nbhd-input-borderRadius 0
--nbhd-input-fontFamily var(--nbhd-fontFamily, inherit)
--nbhd-input-fontSize var(--nbhd-fontSize-regular)
--nbhd-input-inlineSize 100%
--nbhd-input-lineHeight var(--nbhd-lineHeight-1-5)
--nbhd-input-paddingBlock var(--nbhd-space-2)
--nbhd-input-paddingInline var(--nbhd-space-3)
--nbhd-input-outlineColor-focus var(--nbhd-focus-outlineColor)
--nbhd-input-outlineOffset 0
--nbhd-input-outlineStyle solid
--nbhd-input-outlineWidth var(--nbhd-space-025)

Dependencies

This component contains the following components as dependencies.