@wedgekit/input

Purpose

The Input component is a styled, slightly opinionated wrapper around an HTML input where the user can enter data.

Basic Implementation

import Input from '@wedgekit/core';

const Example = () => {
  const [value, setValue] = React.useState('');

  return <Input label="Input Component Example" value={value} onChange={setValue} />;
};

render(<Example />);

Props

In addition to the props listed below, all native and React HTML attributes will be passed through.

label

Type: string

Required: ✅

A label is required for all Wedgekit inputs. If you do not want to display the label, you can use labelHidden.

value

Type: string

Required: ✅

Used in conjunction with onChange to control the value of the input externally.

onChange

Type: onChange: (value: string, name: string, event: SyntheticEvent<HTMLInputElement>) => void

Required: ✅

Called when the value of the input has changed. Allows for externally controlling the component; as well as any desired side effects.

className

Type: string

Required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

disabled

Type: boolean

Required: ❌

Specifies styling and disabled the text input. Disabled elements aren't editable or selectable/focusable, and their data will not be submitted with the form.

forwardedRef

Type: React.Ref

Required: ❌

The forwarded ref giving a user access to the underlying HTML input.

fullWidth

Type: boolean

Required: ❌

Indicates whether the input should span the full width of the parent element

id

Type: `string'

Required: ❌

An ID which will be passed to the underlying HTML element.

info

Type InfoObject

Required: ❌

An object which is necessary if you want to display an info button for the input.

invalid

Type: boolean

Required: ❌

No longer supported. Instead pass 'status'="error" To be removed in v3.0.0

labelHidden

Type: boolean

Required: ❌

Indicates whether to visibly display the label. The label will always be available to users of screen readers via aria-label.

labelInline

Type: boolean

Required: ❌

Indicates whether the input's label will display inline with it to its left

placeholder

Type: string

Required: ❌

Text that appears in the input when it has no value set

readOnly

Type: boolean

Required: ❌

Specifies styling and renders the input as read only. Read only elements can be tabbed through/focused. Their data isn't editable, but it will be submitted with the form. Read only is only supported for input and input wrapping components.

renderIcon

Type: () => JSX.Element

Required: ❌

A render prop for optionally displaying an icon within the input.

<Input

  {...props}

  renderIcon={() => (

    <InteracticeWrapper onClick={() => { console.log('do something')}}> // an interactive wrapper is optional

      <Icon>my_icon</Icon>

    </InteractiveWrapper>

  )}

/>

Please note that the input handles the icon's sizing, and it is not reccomended to surround the icon with an <IconWidth/> tag. The icon will be resized to have a max height and width of 15px.

required

Type: boolean

Required: ❌

Indicates whether the input is required

status

Type: 'default' | 'error' | 'success' | 'pending'

Required: ❌

Indicates form validation status - affects input style only

tabIndex

Type: number

Required: ❌

Property used to really font keyboard users

onBlur

Type: (event: SyntheticEvent<*>) => void

Required: ❌

An optional callback when focus leaves the input

onFocus

Type: (event: SyntheticEvent<*>) => void

Required: ❌

An optional callback when the input is focused

onKeyDown

Type: (event: SyntheticEvent<*>) => void

Required: ❌

An optional callback when a key is pressed

onSubmit

Type: (value: string, event: SyntheticEvent<HTMLButtonElement>) => void

Required: ❌

An optional callback when the user hits 'Enter' while focused in the input

Other Components

• Currency
• Email
• Mask
• Number
• Password
• Percent
• Textarea
• Time