Input

Inputs allow users to submit data to your application.

Examples

import React from 'react';
import ReactDOM from 'react-dom';
import { Input } from 'furl-components';

ReactDOM.render(
  <div>
    <Input type='text' label='Text' placeholder='Text' icon='user' size='small' shape='rounded' />
    <Input type='textarea' label='Multiline text' placeholder='Multiline text' rows={2} />
    <Input type='email' label='E-mail' placeholder='mail@server.com' icon='mail' />
    <Input type='url' label='URL' placeholder='https://google.com' icon='at-sign' />
    <Input type='password' label='Password (with revealer)' icon='key'  withRevealer />
    <Input type='number' label='Number' placeholder='0' min={1} max={40} step={3} />
    <Input type='select' label='Select' icon='cloud' data={[
      'Cloudy', 
      { title: 'Cloudier', selected: true }, 
      'Cloudiest'
    ]} />
    <Input type='select' label='Multiple select' multiple data={[
      'Cloudy', 'Cloudier', 'Cloudiest'
    ]} />
    <Input type='combobox' label='Combo box' icon='sun' data={[
      'Sunny', 'Sunnier', 'Sunniest'
    ]} />
    <Input type='creditcard' label='Credit card' placeholder='0000-0000-0000-0000' icon='credit-card' />
    <Input type='phone' label='Phone' placeholder='+30 (123) 456-7890' icon='phone' />
    <Input type='currency' label='Currency' placeholder='$' icon='dollar-sign' />
    <Input type='time' label='Time' placeholder='HH:MM' icon='clock' displaySeconds={false}/>
    <Input type='date' label='Date' placeholder='dd/mm/yyyy' icon='calendar' />
    <Input type='color'  label='Color' placeholder='#ffffff' icon='sliders' />
    <Input type='file' label='Upload' placeholder='Drag and drop or click to upload files' />
    <Input type='rating' label='Rating' />
    <Input type='rating' label='Rating (custom)' iconName='heart' iconFillColor='var(--danger-red-500)' iconStyle='fill' />
    <Input type='slider' label='Slider' min={10} max={25} />
    <Input type='slider' label='Range slider' range min={10} max={25} />
    <Input type='checkbox' label='Checkbox' color='primary' >I accept the terms of agreement.</Input>
    <Input type='radiogroup' label='Radio group' name='radios' data={[
      'Choice A',
      { color: 'primary', value: 'Choice B'},
      { color: 'secondary', title: 'Choice C'}
    ]} />
  </div>, 
  document.getElementById('root')
);

API

Notes

• type can be one of the following: 'text', 'textarea', 'email', 'url', 'password', 'number', 'creditcard', 'phone', 'currency', 'time', 'date', 'rating', 'slider', 'color', 'file', 'checkbox', 'radiogroup', 'select' or 'combobox'.
• If label is specified, the component will render a <label> right before the <input> or HTML structure of the component.
• icon accepts any valid icon name. You can find a full list of all the available values here.
• If icon is provided, it will render an icon on the left side of the input component. The following input types do not utilize the value of icon: 'number', 'file', 'rating', 'slider', 'checkbox' and 'radiogroup'.
• size can be one of the following: 'small', 'normal' or 'large'.
• shape can be either 'normal' or 'rounded'.
• defaultValue and its type depends on the specific type. Most types use an empty value as their default. 'select','combobox', 'file' and 'radiogroup' are not affected by the value of defaultValue.
• withRevealer will render a small button on the right side of the 'password' input, which will allow users to toggle password visibility on or off.
• A 'rating' input’s iconName accepts any valid icon name. You can find a full list of all the available values here.
• iconStyle can either be 'outline' or 'fill'.
• iconFillColor accepts any valid CSS value, including CSS variables.
• If range is true for a 'slider' input, it will render a component that accepts two values, instead of one.
• If multiple is true for any input type that supports it, the input will accept multiple values.
• A 'file' input does not support the onChange property. Instead it uses the onFilesChanged prop, whose supplied function will be fired with one argument, which is the name(s) of the file(s) selected.
• color can be any of the predefined color palettes ('plain', 'primary', 'secondary', 'success', 'warning' or 'danger').
• If color is specified for a 'radiogroup' input, it wil override the color prop of its children.
• The data prop of a 'radiogroup' can be either an array of string values or objects or a mix of the two. Objects in the data array must have a title and/or value and optionally a color, name and/or the checked props, similary to the 'checkbox' input type.
• The data prop of a 'select' or a 'combobox' can be either an array of string values or objects or a mix of the two. Objects in the data array must have a title and/or value and the selected prop.