LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html, body {
  height: 100%;
}
  
body {
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  width: 400px;
  background: white;
  padding: 15px;
  border: 1px solid black;
}

.form-group {
  margin-bottom: 10px;
}

.form-group.required label:after {
  content: ' *';
}

.form-group label {
  display: inline-block;
  max-width: 100%;
  margin-top: 5px;
  font-weight: 700;
}

.form-group input[type='text'],
  .form-group input[type='email'],
  .form-group input[type='number'],
  .form-group input[type='password'],
  .form-group select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #FFF;
  background-image: none;
  border: 1px solid #CCC;
  border-radius: 4px;
  box-sizing: border-box;
}

.validation-error {
  color: red;
  margin: 5px 0;
  display: inline-block;
}

button {
  padding: 10px 15px;
  border-radius: 4px;
}

.buttons button {
  margin-left: 10px;
}

.buttons button:first-child {
  margin-left: 0;
}
JS
const MyInput = React.createClass({
  mixins: [Formsy.Mixin],
  changeValue(event) {
    this.setValue(event.currentTarget[this.props.type === 'checkbox' ? 'checked' : 'value']);
  },
  render() {
    const className = 'form-group' + (this.props.className || ' ') + (this.showRequired() ? 'required' : this.showError() ? 'error' : null);
    const errorMessage = this.getErrorMessage();
    return (
      
{errorMessage}
); } }); const App = React.createClass({ getInitialState() { return { canSubmit: false }; }, submit(data) { alert(JSON.stringify(data, null, 4)); }, enableButton() { this.setState({ canSubmit: true }); }, disableButton() { this.setState({ canSubmit: false }); }, render() { return (
); } }); React.render(, document.getElementById('app'));
Host Instantly Drag and Drop Website Builder

 

Description

Example
Term
Wed, 11/29/2017 - 11:25

Related Codes

Pen ID
Pen ID
Pen ID