React Form Component

The MUI <Form> component is a lightweight wrapper around the React <form> component which allows you to style forms quickly.

Form titles

If you are using the <Form> component you can use a <legend> element to add a title.

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 placeholder="Input 1" />
        <Input placeholder="Input 2" />
        <Textarea placeholder="Textarea" />
        <Button variant="raised">Submit</Button>
      </Form>
    );
  }
}

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

Inline forms

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 »