The MUI <Form> component is a lightweight wrapper around the React <form> component which allows you to style forms quickly.
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'));
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'));
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'));
Use <Select> elements for MUI style select boxes. Please note that MUI uses the browser's default <select> menu UI on mobile interafaces.
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'));
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'));