Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@nice-digital/nds-input

1.0.3-alpha.0 • Public • Published

@nice-digital/nds-input

Form input component for the NICE Design System

Installation

Install Node, and then:

npm i @nice-digital/nds-input --save

Usage

React

Import the Input components from the package and use within JSX:

import React from "react";
import { Input } from "@nice-digital/nds-input";
 
<Input label="First name" name="firstname" />
 
<Input
    label="Surname"
    name="surname"
    error={true}
    errorMessage="This field is required"
/>
 
<Input
    label="Age on 1st September"
    name="age"
    hint="Please enter in full years"
/>
 
import { register } from "react-hook-form";
<Input label="With ref" name="ref" inputRef={register} />
 

Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

Props

defaultValue
  • Type: string

Pass a value for the input to be initially populated with.

error
  • Type: boolean
  • Default: false

Whether the component is in its error state. Adds classes to apply styling.

errorMessage
  • Type: string

Error message to display inline.

hint
  • Type: string

Display extra help text above the input field.

inputRef
  • Type: React.Ref
  • Default: null

Allow parent access to the ref property of the input element.

label
  • Type: React.ReactNode (required)

The content of the label element.

name
  • Type: string (required)

Input element name property.

type
  • Type: string
  • Default: "text"
Anything else

Any other props passed to <Input /> will be cascaded to the input element.x

SCSS

If you're not using React, then import the SCSS directly into your application by:

@import '~@nice-digital/nds-input/scss/input';

HTML

If you're not using React, then include the SCSS as above and use the HTML:

<div class="input input--error">
    <label class="input__label">
        First name
    </label>
    <p class="form__hint">
        Please enter your name
    </p>
    <p class="form__error">
        This field is required
    </p>
    <input  name="firstname" 
            class="input__input" 
            type="text"
    >
</div>

Keywords

none

Install

npm i @nice-digital/nds-input

DownloadsWeekly Downloads

24

Version

1.0.3-alpha.0

License

MIT

Unpacked Size

18.8 kB

Total Files

9

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar