Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

» Form Controls

Tornado React Provides React Components for its Form Controls Components that you can use in your react app to build up your options interactive controls.

Important! : All React Components Docs are Explaining Only The component and its Properties if you want to know how the structure behind the component work you have to read the regular docs for the component
Important! : All React Components Have a Custom Class and ID Property { className=”..” & id=”..” } to allow you easy customize/manipulate/override the component.

Form Controls

Tornado provide a nice simple yet powerful form controls components for react js and you can import it and use like the code below and the component allows you to create any type of form control input[all types], select, textarea and by default it creates none-type input control.

/*======> Tornado Grid System <======*/
import {FormControl} from './React/FormControl';

/*=====> Usage Case <=====*/
const usage = () => {
   return <FormControl></FormControl>;

General Properties

this an example of creating input control with the general properties that is shared across all form controls and the component accepts any event type and any extra attributes like data-attributes or Events attributes etc.

/*=====> Usage Case <=====*/
const usage = () => {
    //===> Change Handler <===//
    function chHandler () {
        const eventTarget = as HTMLInputElement;
    //===> Render Control
    return <FormControl
        type="text"               //===> Control Type
        size="large"              //===> Control Size
        name="control value"      //===> Control Name
        placeholder="fullname"    //===> Control Placeholder
        onChange={chHandler}      //===> onChange Event
        onInput={chHandler}       //===> onInput Event
        onFocus={chHandler}       //===> onFocus Event
        onClick={chHandler}       //===> onClick Event
        onBlur={chHandler}        //===> onBlur Event

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.