React Forms

Basic example

Use <Input> and <Textarea> elements to use MUI styling.

import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'muicss/lib/react/form';
import Input from 'muicss/lib/react/input';
import Textarea from 'muicss/lib/react/textarea';
import Button from 'muicss/lib/react/button';

class Example extends React.Component {
  render() {
    return (
      <Form>
        <legend>Title</legend>
        <Input hint="Input 1" />
        <Input hint="Input 2" />
        <Textarea hint="Textarea" />
        <Button variant="raised">Submit</Button>
      </Form>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Fixed labels

Use the label attribute to add a fixed label.

import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'muicss/lib/react/form';
import Input from 'muicss/lib/react/input';
import Textarea from 'muicss/lib/react/textarea';
import Button from 'muicss/lib/react/button';

class Example extends React.Component {
  render() {
    return (
      <Form>
        <legend>Title</legend>
        <Input label="Input 1" />
        <Input label="Input 2" />
        <Textarea label="Textarea" />
        <Button variant="raised">Submit</Button>
      </Form>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Floating labels

Use floatingLabel={true} to float labels.

import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'muicss/lib/react/form';
import Input from 'muicss/lib/react/input';
import Textarea from 'muicss/lib/react/textarea';
import Button from 'muicss/lib/react/button';

class Example extends React.Component {
  render() {
    return (
      <Form>
        <legend>Title</legend>
        <Input label="Input 1" floatingLabel={true} />
        <Input label="Input 2" floatingLabel={true} defaultValue="Value on load" />
        <Textarea label="Textarea" floatingLabel={true} defaultValue="Value on load" />
        <Button variant="raised">Submit</Button>
      </Form>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Inline Form

Use inline={true} to inline inputs above the small breakpoint.

import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'muicss/lib/react/form';
import Input from 'muicss/lib/react/input';
import Button from 'muicss/lib/react/button';

class Example extends React.Component {
  render() {
    return (
      <Form inline={true}>
        <Input />
        <Button>submit</Button>
      </Form>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Checkboxes and radio buttons

Use <Checkbox> and <Radio> elements for improved styling.

import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'muicss/lib/react/form';
import Checkbox from 'muicss/lib/react/checkbox';
import Radio from 'muicss/lib/react/radio';

class Example extends React.Component {
  render() {
    return (
      <Form>
        <Checkbox name="inputA1" label="Option one" defaultChecked={true} />
        <Checkbox name="inputA2" label="Option two" />
        <Checkbox name="inputA3" label="Option three is disabled" disabled={true} />
        <Radio name="inputB" label="Option one" defaultChecked={true} />
        <Radio name="inputB" label="Option two" />
        <Radio name="inputB" label="Option three is disabled" disabled={true} />
      </Form>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Select boxes

Use <Select> elements for MUI style select boxes.

import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'muicss/lib/react/form';
import Option from 'muicss/lib/react/option';
import Select from 'muicss/lib/react/select';

class Example extends React.Component {
  render() {
    return (
      <Form>
        <Select defaultValue="option-2">
          <Option value="option-1" label="Option 1" />
          <Option value="option-2" label="Option 2" />
          <Option value="option-3" label="Option 3" />
          <Option value="option-4" label="Option 4" />
        </Select>
      </Form>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »

Form validation

Use required={true} and <Input type="email|url|tel"> to take advantage of built-in HTML5 validation.

import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'muicss/lib/react/form';
import Input from 'muicss/lib/react/input';
import Textarea from 'muicss/lib/react/textarea';
import Button from 'muicss/lib/react/button';

class Example extends React.Component {
  render() {
    return (
      <Form>
        <legend>Title</legend>
        <Input label="Required Text Field" required={true} />
        <Input label="Required Email Address" type="email" floatingLabel={true} required={true} />
        <Textarea label="Required Textarea" floatingLabel={true} required={true} />
        <Input label="Email Address" type="email" defaultValue="Validation error" />
        <Button variant="raised">Submit</Button>
      </Form>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));
View in new tab »
« Previous Next »