@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