Input

SfInput is a single-line text field allows users to enter any combination of letters, numbers, or symbols. It adds default styles to the native <input type="text"> and supports supports adding content before/after the text input.

If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about required form fields in our guide here.

Examples

Basic input component

SfInput supports 3 sizes that can be set with the size prop: 'sm', md, and 'lg'.

Input with icons

You can insert content before and after your input using the slotPrefix and slotSuffix props.

This can be useful for adding icons or buttons to your input.

Input in disabled state

SfInput comes with out-of-the-box styles for a disabled input.

Readonly Input

SfInput comes with out-of-the-box styles for a readonly input.

Invalid State

If you pass the invalid prop, the input will be styled to indicate an invalid state.

Full Example

This is an example of what SfInput might look like in your end code. It has a label, help text, character counting, and different styles depending on the input state.

import { SfInput } from '@storefront-ui/react';
import classNames from 'classnames';
import { ChangeEvent, useState } from 'react';

export default function InputWithLimit() {
  const characterLimit = 25;
  const label = 'Label';
  const placeholder = 'placeholder';
  const disabled = false;
  const readonly = false;
  const invalid = false;
  const helpText = 'Help text';
  const required = false;
  const requiredText = 'Required';
  const errorText = 'Error';

  const [value, setValue] = useState('');

  function onChange(event: ChangeEvent<HTMLInputElement>) {
    setValue(event?.target.value);
  }
  const isAboveLimit = characterLimit ? value.length > characterLimit : false;
  const charsCount = characterLimit ? characterLimit - value.length : null;

  const getCharacterLimitClass = () => (isAboveLimit ? 'text-negative-700 font-medium' : 'text-neutral-500');

  return (
    <>
      <label>
        <span
          className={classNames('text-sm font-medium', {
            'cursor-not-allowed text-disabled-500': disabled,
          })}
        >
          {label}
        </span>
        <SfInput
          size="base"
          value={value}
          invalid={false}
          placeholder={placeholder}
          disabled={disabled}
          readOnly={readonly}
          onChange={onChange}
          wrapperClassName={classNames({
            'peer !bg-disabled-100 !ring-disabled-300 !ring-1 !text-disabled-500': disabled || readonly,
          })}
        />
      </label>
      <div className="flex justify-between">
        <div>
          {invalid && !disabled && <p className="text-sm text-negative-700 font-medium mt-0.5">{errorText}</p>}
          {helpText && (
            <p className={classNames('typography-hint-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
              {helpText}
            </p>
          )}
          {requiredText && required ? (
            <p className="mt-1 text-sm font-normal text-neutral-500 before:content-['*']">{requiredText}</p>
          ) : null}
        </div>
        {characterLimit && !readonly ? (
          <p
            className={classNames(
              'typography-error-xs mt-0.5',
              disabled ? 'text-disabled-500' : getCharacterLimitClass(),
            )}
          >
            {charsCount}
          </p>
        ) : null}
      </div>
    </>
  );
}

Notes

All non-prop attributes and styles added to SfInput component are passed directly to the native input element. This means that you can add all of the input attributes directly to SfInput. If you want to style the wrapper div, you can pass your classes via the wrapperClassName prop.

Since, size is a specified prop of SfInput, you won't be able to pass the native size attribute to your input element. Instead, you can use the width property with ch unit instead (eg. width: 10ch).

Accessibility notes

Since SfInput uses <input>, it inherits all the features of the native input. For example, SfInput is focusable for keyboard users with tab.

Avoid adding div tags to slots. If an input element is wrapped in label tag (recommended) then it can't have div inside.