semantic-ui-react-labeledinput

Input control with integrated label and validation support for Semantic UI React

Examples of box inputs

Examples of line inputs

Prerequisites

"react": "^16.0.0",
"react-dom": "^16.0.0",
"semantic-ui-react": "^0.87.0"

Installation

npm install --save semantic-ui-react-labeledinput

Demo

LabeledInput demo

Example usage

import React from 'react';
import LabeledInput from 'semantic-ui-react-labeledinput';

class LabeledInputExample extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: ""
        };
    }
    
    changeValue = (newValue) => {
        this.setState({ value: newValue });
    }
   
    render() => {(
        <LabeledInput inputId="address" label="Address" value={this.state.value} onValueChange={this.changeValue} />
    )};
}

LabeledInput with box presentation (default presentation mode)

<LabeledInput inputId="address" label="Address" presentation="box" value={this.state.value} onValueChange={this.changeValue} />

LabeledInput with line presentation

<LabeledInput inputId="address" label="Address" presentation="line" value={this.state.value} onValueChange={this.changeValue} />

LabeledInput with predefined validations

<LabeledInput errorText="value must be an integer" inputId="input1" label="Age" validation="integer" value={this.state.value} onValueChange={this.changeValue} />             
<LabeledInput errorText="Invalid e-mail address" inputId="input2" label="E-mail address" validation="emailAddress" value={this.state.value} onValueChange={this.changeValue} />

LabeledInput with regular expression validation

const regExp = /^\d{3,4}$/;
<LabeledInput inputId="input1" label="CVC" validation={regExp} value={this.state.value} onValueChange={this.changeValue} />

LabeledInput with validation function

const isEvenNumber = (valueStr) => {
    const value = parseInt(valueStr, 10);
    return value % 2 === 0;
}

<LabeledInput inputId="input1" label="Enter even number" validation={isEvenNumber} value={this.state.value} onValueChange={this.changeValue} />

LabeledInput with list of allowed values validation (case sensitive)

const allowedValues = ['value1', 'value2', 'value3'];
<LabeledInput inputId="input1" label="Enter value" validation={allowedValues} value={this.state.value} onValueChange={this.changeValue} />

More examples can be found in demo/demo.tsx file

Mandatory properties

inputId: string,  // Each input must to have a unique id
label: string,
value: string, 
onValueChange: (newValue: string) => void,

Optional properties

Property	Description
allowEmptyValue	Specifies if empty value for input is allowed
className	class names for outer div
countryCode	Default country code ISO 3166-1 Alpha-2 code for phone number validation, if not supplied, browser's country code is used
creditCardNumber	Credit card number to be used for CVC validation
disabled	Specifies if input is enabled or disabled
errorText	Text shown if validation fails
errorTextPosition	Position where error text is shown
focus	Specifies if input has initially focus style
icon	Name of Semantic UI icon to be shown in input, is overridden by validationErrorIcon or validationSuccessIcon, has no effect for validation type 'creditCardNumber
iconColor	Color for icon (red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, black
iconPosition	Position where the icon is shown
maxLength	Maximum number of characters allowed for input control value
maxValue	Maximum allowed value when validation is 'number' or 'integer'
minLength	Minimum number of characters needed for input control value
minValue	Minimum allowed value when validation is 'number' or 'interger'
presentation	Look & feel of input control (box or line)
size	Size of control
type	HTML input type, if undefined, sets type automatically according to validation or otherwise 'text'
validation	Validation keyword, a regular expression or a validation function
validationErrorIcon	Semantic UI icon name to be shown if validation fails, overrides icon set by icon prop, has no effect for validation type 'creditCardNumber'
validationSuccessIcon	Semantic UI icon name to be shown if validation succeeds, overrides icon set by icon prop, has no effect for validation type 'creditCardNumber'

Optional property types

allowEmptyValue: boolean,
className: string,  
countryCode: string,
creditCardNumber: string,
disabled: boolean,
errorText: string,
errorTextPosition: 'bottom' | 'right',
focus: boolean,
icon: string,
iconColor: string,
iconPosition: 'right',
maxLength: number,
maxValue: number,
minLength: number,
minValue: number,
presentation: 'box' | 'line',
size: 'large' | 'big' | 'huge' | 'massive',
type: string,
validation: RegExp | string[] | (inputString: string) => boolean | 'url' | 'emailAddress' | 'creditCardNumber' | 'creditCardExpiration' | 'creditCardVerificationCode' | 'number' | 'integer' | 'alphaNumeric' | 'usZipCode' | 'caPostCode' | 'ukPostCode' | 'phoneNumber' | 'usSSN' | 'ipAddress' | 'ipv4Address' | 'ipv6Address' | 'hexColor'

Default values for optional properties

allowEmptyValue: false,
className: undefined,
countryCode: '',
creditCardNumber: '',
disabled: false,
errorText: '',
errorTextPosition: 'bottom',
focus: false,
icon: '',
iconColor: undefined,
iconPosition: 'right',
maxLength: undefined,
maxValue: undefined,
minLength: undefined,
minValue: undefined,
presentation: 'box',
size: 'huge',
type: undefined,
validation: undefined

Class names

Class name	Description
errorLabel	Applied to div that contains error label, see following styling examples how it can be used to style error messages
focusedOrValued	Applied to input label when input has focus or it contains a value. This class name can be used to adjust label top offset (default: 2px) or font size, for example.

Box input styling example

styles.css

.creditCardNumber .ui.label.errorLabel, .creditCardExpiration .ui.label.errorLabel, .cvc .ui.label.errorLabel {
  font-size: 0.9em;
}
   
.creditCardNumber input {
  width: 14em;
}
   
.creditCardExpiration {
  margin-left: 0.5em;
}
   
.creditCardExpiration input {
  width: 6em;
}
   
.cvc {
  margin-left: 0.5em;
}
   
.cvc input {
  margin-left: 0.5em;
  width: 4.5em;
}

Applying CSS using className

<LabeledInput className="creditCardNumber" inputId="creditCardNumber" label="Credit card number" errorText="must be a cc number" presentation="box" validation="creditCardNumber" onValueChange={this.changeCreditCardNumber} value={creditCardNumber}/>
<LabeledInput className="creditCardexpiration" inputId="creditCardExpiration" label="MM / YY" errorText="must be a MM / YY" presentation="box" validation="creditCardExpiration" onValueChange={this.changeCreditCardExpiration} value={creditCardExpiration}/>
<LabeledInput className="cvc" inputId="cvc" label="CVC" errorText="must be a CVC" presentation="box" validation="creditCardVerificationCode" onValueChange={this.changeCVC} value={cvc}/>

Line input styling example

styles.css

.creditCardNumber .ui.label.errorLabel, .creditCardExpiration .ui.label.errorLabel, .cvc .ui.label.errorLabel {
  font-size: 0.7em;
}
   
.creditCardNumber input {
  width: 13.5em;
}
   
.creditCardExpiration {
  margin-left: 0.5em;
}
   
.creditCardExpiration input {
  width: 4.5em;
}
   
.cvc {
  margin-left: 0.5em;
}
   
.cvc input {
  margin-left: 0.5em;
  width: 3.5em;
}

Applying CSS using className

<LabeledInput className="creditCardNumber" inputId="creditCardNumber" label="Credit card number" errorText="must be a cc number" presentation="line" validation="creditCardNumber" onValueChange={this.changeCreditCardNumber} value={creditCardNumber}/>
<LabeledInput className="creditCardexpiration" inputId="creditCardExpiration" label="MM / YY" errorText="must be a MM / YY" presentation="line" validation="creditCardExpiration" onValueChange={this.changeCreditCardExpiration} value={creditCardExpiration}/>
<LabeledInput className="cvc" inputId="cvc" label="CVC" errorText="must be a CVC" presentation="line" validation="creditCardVerificationCode" onValueChange={this.changeCVC} value={cvc}/>

Credit card validations

Supported cards

• American Express
• Dankort
• Diners Club
• Discover
• JCB
• Laser
• Maestro
• MasterCard
• UnionPay
• Visa
• Visa Electron

Credit card number must pass Luhn check

Credit card expiration is supported in format 'MM / YY'

Credit card verification code (CVC) can validated with two options

• Without credit card number: it must be 3-4 digits
• With credit card number: it must be 3-4 digits depending on the supplied credit card type

License

MIT License