@cloudflare/component-form
TypeScript icon, indicating that this package has built-in type declarations

5.0.53 • Public • Published

@cloudflare/component-form

Cloudflare Form Component

Installation

Installation with yarn is recommended

$ yarn add @cloudflare/component-form

Usage

import React from 'react';
import {
  Form,
  FormHeader,
  FormFooter,
  FormFieldset,
  FormLabel,
  FormFieldError
} from '../../src';
import { Input } from '@cloudflare/component-input';
import { Select } from '@cloudflare/component-select';
import { Textarea } from '@cloudflare/component-textarea';
import { Button } from '@cloudflare/component-button';

class FormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      type: 'suggestion',
      message: 'This is blasphemy! This is madness!'
    };

    this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
    this.handleLastNameChange = this.handleLastNameChange.bind(this);
    this.handleTypeChange = this.handleTypeChange.bind(this);
    this.handleMessageChange = this.handleMessageChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleFirstNameChange(e) {
    this.setState({ firstName: e.value });
  }

  handleLastNameChange(e) {
    this.setState({ lastName: e.value });
  }

  handleTypeChange(type) {
    this.setState({ type });
  }

  handleMessageChange(e) {
    this.setState({ message: e.value });
  }

  handleSubmit() {
    console.log(JSON.stringify(this.state, null, 2));
    this.setState({
      firstName: '',
      lastName: '',
      type: 'suggestion',
      message: ''
    });
  }

  render() {
    return (
      <Form layout="horizontal" onSubmit={this.handleSubmit}>
        <FormHeader title="Feedback Form" />
        <FormFieldset legend="Name">
          <FormLabel htmlFor="firstName">First Name</FormLabel>
          <Input
            id="firstName"
            name="firstName"
            type="text"
            value={this.state.firstName}
            onChange={this.handleFirstNameChange}
          />
          <FormLabel htmlFor="lastName">Last Name</FormLabel>
          <Input
            id="lastName"
            name="lastName"
            type="text"
            value={this.state.lastName}
            onChange={this.handleLastNameChange}
          />
        </FormFieldset>

        <FormFieldset legend="Type">
          <FormLabel htmlfor="type" hidden>
            Type
          </FormLabel>
          <Select
            id="type"
            options={[
              { value: 'suggestion', label: 'Suggestion' },
              { value: 'problem', label: 'Problem' }
            ]}
            value={this.state.type}
            onChange={this.handleTypeChange}
          />
        </FormFieldset>

        <FormFieldset legend="Message">
          <FormLabel htmlFor="message" hidden>
            Message
          </FormLabel>
          <Textarea
            id="message"
            name="message"
            value={this.state.message}
            onChange={this.handleMessageChange}
          />
          <FormFieldError
            field={{ invalid: true }}
            validations={{
              response: 'Madness? This is Sparta!',
              otherResponse: 'Wax on, wax off'
            }}
          />
        </FormFieldset>

        <FormFooter>
          <Button submit type="primary" onClick={this.handleSubmit}>
            Submit
          </Button>
        </FormFooter>
      </Form>
    );
  }
}

export default FormComponent;

Readme

Keywords

none

Package Sidebar

Install

npm i @cloudflare/component-form

Weekly Downloads

7,694

Version

5.0.53

License

BSD-3-Clause

Unpacked Size

280 kB

Total Files

24

Last publish

Collaborators

  • lerwincf
  • lbarthonet
  • cf-media-manager
  • jacobbednarz
  • celso
  • cf-radar
  • dash_service_account
  • g4brym
  • snigdha34
  • wrangler-publisher
  • marksteyn
  • chiminator
  • sgoodhew_cf
  • terinjokes
  • third774
  • jsteinberger
  • jasnell
  • asapzacy
  • pcostanzo
  • gregbrimble
  • geelen
  • rexscaria
  • dcruz_cf
  • xuranwang
  • jculvey
  • sejoker
  • vasturiano
  • cf-ci-write
  • segments-write
  • thibmeu
  • xortive
  • gurjinder
  • cf-ci2
  • lvalenta
  • worenga