semantic-ui-react#Form JavaScript Examples

render() {
    const {message} = this.state

    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <Form.Group>
            <Form.TextArea
              placeholder='Type your message here!'
              name='message'
              value={message}
              onChange={this.handleChange}
            />
            <Form.Button content='Submit' />
          </Form.Group>
        </Form>
      </div>
    )
  }

render() {
    let fRef = null;
    const schema = this.buildTheFormSchema();
    const formSchema = new SimpleSchema2Bridge(schema);
    return (
        <Segment>
          <Header dividing> Add suggestion to list. </Header>
          <AutoForm ref={ref => {
            fRef = ref;
          }} schema={formSchema} onSubmit={data => this.submit(data, fRef)}>
            <Form.Group widths="equal">
              <SelectField name="type" />
            </Form.Group>
              <Form.Group widths="equal">
              <TextField name="name" />
              </Form.Group>
                <Form.Group widths="equal">
              <TextField name="description" />
            </Form.Group>
            <SubmitField />
          </AutoForm>
        </Segment>
    );
  }

render() {
        return (
            <Grid textAlign='center' verticalAlign='middle'>
                <Grid.Column style={{ maxWidth: 600 }}>
                    <Segment inverted color='blue'>
                        <Header as='h2' color='white' textAlign='center'>
                            Synonyms
                        </Header>
                        <p> Add words to the synonym dictionary! Synonym declarations must be formatted according to the PostgreSQL
                            thesaurus dictionary configuration file. In other words, each synonym must be declared in one line,
                            and must be formatted like this: </p>
                        <p> sample word(s) : indexed word(s) </p>
                        <Form inverted color='blue' loading={this.state.loading} onSubmit={this.handleSubmit}>
                            <Form.Field
                                fluid
                                control={TextArea}
                                rows='20'
                                name='fileContents'
                                value={this.state.fileContents}
                                onChange={this.handleChange}
                            />
                            <Form.Button color='black' content='Submit'/>
                        </Form>
                    </Segment>
                </Grid.Column>
            </Grid>
        )
    }

render() {
    const { position } = this.props;
    return (
      <Form>
        <Form.Group grouped widths="equal">
          <Card.Group stackable itemsPerRow={3}>
            {this.renderCandidates(position)}
          </Card.Group>
        </Form.Group>
      </Form>
    );
  }

SignForm = () => {
   return <Form>
    <Form.Field>
      <Input icon='user' iconPosition='left' placeholder='From Account' />
    </Form.Field>
    <Form.Field>
      <Input icon='user' iconPosition='left' placeholder='To Account' />
    </Form.Field>
    <Form.Field>
      <Input icon='money bill alternate' iconPosition='left' placeholder='Amount in microAlgos' />
    </Form.Field>
    <Form.Field>
      <Input icon='sticky note outline' iconPosition='left' placeholder='Enter Note' />
    </Form.Field>

    <Button primary={true} type='submit'>Submit</Button>
  </Form>
}

export default function ContactForm() {
  const name = useFormInput("");
  const email = useFormInput("");
  // eslint-disable-next-line no-unused-vars
  const [state, dispatch] = useContext(ContactContext);

  const onSubmit = () => {
    dispatch({
      type: "ADD_CONTACT",
      payload: { id: _.uniqueId(10), name: name.value, email: email.value }
    })
    // Reset Form
    name.onReset();
    email.onReset();
  };

  return (
    <Segment basic>
      <Form onSubmit={onSubmit}>
        <Form.Group widths="3">
          <Form.Field width={6}>
            <Input placeholder="Enter Name" {...name} required />
          </Form.Field>
          <Form.Field width={6}>
            <Input placeholder="Enter Email" {...email} type="email" required />
          </Form.Field>
          <Form.Field width={4}>
            <Button fluid primary>
              New Contact
            </Button>
          </Form.Field>
        </Form.Group>
      </Form>
    </Segment>
  );
}

UploadForm = props => (
  <Form>
    <Form.Group width={10}>
      <FileButton
        icon="file"
        content="Click to upload (.csv file)"
        onSelect={props.onSelect}
      />
      {props.fileName && (
        <span style={{ padding: "8px 0 0 5px" }}>{props.fileName} Added!</span>
      )}
    </Form.Group>
  </Form>
)

InputField = ({ name, label, placeholder, required, onChange, error }) => {
  return (
    <Form.Input
      required={required}
      label={label}
      placeholder={placeholder}
      onChange={(e) => onChange(name, e.currentTarget.value)}
      error={error[name]}
    />
  )
}

render(){
        return(
            <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
                <Form.Field>
                    <label>Amount to Contribute</label>
                    <Input 
                        label="ether" 
                        labelPosition="right" 
                        value={this.state.value}
                        onChange = {event => this.setState ( { value : event.target.value })}
                    />
                </Form.Field>
                
                <Message error header="Oops!" content={this.state.errorMessage} />

                <Button loading={this.state.loading} primary>Contribute!</Button>
            </Form>
        );
    }

render () {
    const { loading, message } = this.state;
    return (
      <Form onSubmit={this.onSubmit} loading={loading} error={Boolean(message)}>
          <Form.Input
            name="username" required
            fluid icon='user' iconPosition='left' placeholder='Username'
          />
          <Form.Input
            name="password" type='password' required
            fluid icon='lock' iconPosition='left' placeholder='Password'
          />
          <Form.Button type="submit" fluid color='blue'>Log in</Form.Button>
          {message && <Message error size='small' content={message} />}
      </Form>
    );
  }

render() {
    const { fieldPath } = this.props;
    return (
      <Form.Field>
        <CalendarInputField
          fieldPath={fieldPath}
          component={this.renderFormField}
        />
      </Form.Field>
    );
  }

render() {
    const { fieldPath, label, labelIcon } = this.props;
    return (
      <Form.Field
        id={fieldPath}
        name={fieldPath}
      >
        <FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />
        <Segment size="massive" tertiary textAlign="center">
          Coming soon
        </Segment>
      </Form.Field>
    );
  }

render() {
    const { value, suggestions } = this.state;
    return (
      <Fragment>
        <Form size="big" onSubmit={this.handleSubmit}>
          <Form.Field>
            <label>Description</label>
            <TextInput
              maxOptions={8}
              offsetY={20}
              minChars={1}
              value={value}
              onRequestOptions={this.debouncedRequestOptions}
              options={suggestions}
              onChange={this.handleChange}
              placeholder="Description"
              type="textarea"
              name="description"
              style={{ minHeight: 100, maxHeight: 100 }}
            />
          </Form.Field>

          <Button primary fluid size="big">
            Upload
          </Button>
        </Form>
      </Fragment>
    );
  }

export default function AnswerSubmission(props) {
  const { updateAnswer } = props;

  const [answer, setAnswer] = useState('');

  return (
    <div className="answer-submission">
      <Form onSubmit={() => updateAnswer(answer)}>
        <Form.Field
          control="textarea"
          rows="3"
          value={answer}
          onChange={(e) => setAnswer(e.target.value)}
        />
        <div className="answer-submit-container">
          <Button
            className="icon exit-button"
            onClick={(e) => {
              e.preventDefault();
              props.back();
            }}
          >
            <i className="icon arrow left" />
          </Button>
          <Form.Field control="button">Submit</Form.Field>
        </div>
      </Form>
    </div>
  );
}

function LocationDataURLViewChild({ __id, locationUrl }) {
  const { updateLocationACL } = useLocationACLSubscribe(__id, locationUrl);
  const aclStatus = useRecoilValue(locationACLStatusState(__id));
  const isLoading = aclStatus === 'loading';

  const refInput = useRef(null);

  useEffect(() => {
    updateLocationACL();
  }, []);

  const onClick = useCallback(() => {
    refInput.current.select();
    document.execCommand('copy');
  }, []);

  return (
    <Form.Field disabled={isLoading}>
      <label>This location is set as `{aclStatus}`</label>
      <Input
        fluid
        disabled={aclStatus === 'private'}
        ref={refInput}
        value={locationUrl}
        action={{
          color: 'teal',
          icon: 'copy',
          labelPosition: 'right',
          content: 'Copy',
          onClick: onClick,
        }}
      />
    </Form.Field>
  );
}

function Checkboxes({ name, field, values, onSearch }) {
  if (!values || values.length === 0) return null;
  const onChange = (event, { value, checked }) => {
    // The new selected checkboxes are the ones that were previously selected
    // and the current value of the checkbox that triggered the event
    const selected = values
      .filter(({ value: oValue, checked: oChecked }) =>
        oValue === value ? checked : oChecked
      )
      .map(({ value: oValue }) => oValue);
    onSearch({ [field]: selected });
  };

  return (
    <Form.Field>
      <label>{name}</label>
      {values
        .filter(
          ({ value }) =>
            value.length > 0 && !(field === 'year' && value === '1970')
        )
        .map(({ value, count, checked }, i) => (
          <PaddedCheckbox
            key={i}
            name={name}
            value={value}
            onChange={onChange}
            label={`${value} (${count})`}
            checked={checked}
          />
        ))}
    </Form.Field>
  );
}

render() {
    const model = this.props.participant;
    const schema = this.buildTheFormSchema();
    const formSchema = new SimpleSchema2Bridge(schema);
    const firstname = model.firstName;
    if (this.state.redirectToReferer) {
      const from = { pathname: ROUTES.YOUR_PROFILE };
      return <Redirect to={from} />;
    }
    return (
        <Segment>
          <Header dividing>Hello {firstname}, this is your first time to login, so please fill out your profile</Header>
          <AutoForm schema={formSchema} model={model} onSubmit={data => {
            this.submit(data);
          }}>
            <Form.Group widths="equal">
              <TextField name="username" disabled />
              <BoolField name="isCompliant" disabled />
            </Form.Group>
            <Form.Group widths="equal">
              <TextField name="firstName" />
              <TextField name="lastName" />
              <SelectField name="demographicLevel" />
            </Form.Group>
            <Form.Group widths="equal">
              <TextField name="linkedIn" />
              <TextField name="gitHub" />
              <TextField name="slackUsername" />
            </Form.Group>
            <Form.Group widths="equal">
              <TextField name="website" />
              <LongTextField name="aboutMe" />
            </Form.Group>
            <MultiSelectField name="challenges" />
            <Form.Group widths="equal">
              <MultiSelectField name="skills" />
              <MultiSelectField name="tools" />
            </Form.Group>
            <SubmitField />
          </AutoForm>
        </Segment>
    );
  }

function PostForm() {
  const { values, onChange, onSubmit } = useForm(createPostCallback, {
    body: ''
  });

  const [createPost, { error }] = useMutation(CREATE_POST_MUTATION, {
    variables: values,
    update(proxy, result) {
      const data = proxy.readQuery({
        query: FETCH_POSTS_QUERY
      });
      data.getPosts = [result.data.createPost, ...data.getPosts];
      proxy.writeQuery({ query: FETCH_POSTS_QUERY, data });
      values.body = '';
    }
  });

  function createPostCallback() {
    createPost();
  }

  return (
    <>
      <Form onSubmit={onSubmit}>
        <h2 id="spendQuarantime">How'd you spend your Quarantime? ...</h2>
        <Form.Field>
          <Form.Input id="post-form"
            placeholder="Share experience, projects, opportunities, etc"
            name="body"
            onChange={onChange}
            value={values.body}
            error={error ? true : false}
          />
          <Button type="submit" id="post-submit">
            Submit
          </Button>
        </Form.Field>
      </Form>
      {error && (
        <div className="ui error message" style={{ marginBottom: 20 }}>
          <ul className="list">
            <li>{error.graphQLErrors[0].message}</li>
          </ul>
        </div>
      )}
    </>
  );
}

function Login() {
  //router
  const history = useHistory();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const loginUser = (event) => {
    event.preventDefault();
    if (email && password) {
      auth
        .signInWithEmailAndPassword(email, password)
        .then((authUser) => {
          history.push("/");
        })
        .catch((error) => {
          alert(
            "Opps! something went wrong please check your console for more info"
          );
          console.error(error.message);
        });
    } else {
      alert("Please Enter all the fields");
    }
  };

  return (
    <div className="login">
      <Container>
        <Grid centered columns={3} doubling stackable>
          <Grid.Column>
            <h2>Sign In</h2>

            <Card>
              <Form className="login__form">
                <Form.Field required>
                  <label>E-mail</label>
                  <input
                    placeholder="First Name"
                    type="email"
                    onChange={(event) => setEmail(event.target.value)}
                  />
                </Form.Field>
                <Form.Field required>
                  <label>Password</label>
                  <input
                    placeholder="password"
                    type="password"
                    onChange={(event) => setPassword(event.target.value)}
                  />
                </Form.Field>
                <Button color="green" type="submit" onClick={loginUser}>
                  Login
                </Button>
              </Form>
            </Card>
          </Grid.Column>
        </Grid>
      </Container>
    </div>
  );
}

render() {
        return (
            <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
                <Grid.Column style={{ maxWidth: 400 }}>
                    <Segment>
                        <Header as='h2' color='blue' textAlign='center'>
                            Log-in to your account
                        </Header>
                        <Form loading={this.state.loading} onSubmit={this.handleSubmit} ref="form">
                            <Form.Input
                                fluid
                                icon='at'
                                iconPosition='left'
                                type="text"
                                name="email"
                                placeholder="Email address"
                                onChange={this.handleChange}
                                value={this.state.email}
                            />
                            <Form.Input
                                fluid
                                icon='lock'
                                iconPosition='left'
                                type="password"
                                name="password"
                                placeholder="Password"
                                onChange={this.handleChange}
                                value={this.state.password}
                            />
                            <Grid.Row>
                                <NavLink to="/register" style={{
                                    display: 'inline-block',
                                    padding: '4px 0 2px 0',
                                    marginTop: '10px',
                                }}>Create a new account</NavLink>
                            </Grid.Row>
                            <Grid.Row>
                                <NavLink to="/forgot" style={{
                                    display: 'inline-block',
                                    padding: '2px 0 4px 0',
                                    marginBottom: '8px',
                                }}>Forgot Password?</NavLink>
                            </Grid.Row>
                            <Button content='Submit' fluid color="blue" disabled={!this.state.email || !this.state.password}>
                                Login
                            </Button>
                        </Form>
                    </Segment>
                    { !!this.state.error &&
                    <Message negative>
                        <p>{this.state.error}</p>
                    </Message>}
                </Grid.Column>
            </Grid>);
    }

RadioButton = style(Form.Radio)`
  text-align: center;
`

export default function ContactForm() {
  // eslint-disable-next-line no-unused-vars
  const [state, dispatch] = useContext(ContactContext);

  let defaultName = "";
  let defaultEmail = "";
  let doCreate = true;

  if (state.selectedId) {
    const defaultContact = state.contacts.filter(
      (item) => item.id === state.selectedId
    );
    defaultName = defaultContact[0].name;
    defaultEmail = defaultContact[0].email;
    doCreate = false;
  }

  let name = useFormInput(defaultName);
  let email = useFormInput(defaultEmail);

  useEffect(() => {
    name._setVal(defaultName);
    email._setVal(defaultEmail);
  }, [state.selectedId]);

  // eslint-disable-next-line no-unused-vars
  const { _setVal: setN, ...validName } = name;
  // eslint-disable-next-line no-unused-vars
  const { _setVal: setE, ...validEmail } = email;

  const onSubmit = () => {
    let actionType = "ADD_CONTACT";
    if (!doCreate) {
      actionType = "UPDATE_CONTACT";
    }
    const id = state.selectedId ? state.selectedId : _.uniqueId(10);
    dispatch({
      type: actionType,
      payload: { id, name: name.value, email: email.value },
    });
    // Reset Form
    name.onReset();
    email.onReset();
  };

  return (
    <Segment basic>
      <Form onSubmit={onSubmit}>
        <Form.Group widths="3">
          <Form.Field width={6}>
            <Input placeholder="Enter Name" {...validName} required />
          </Form.Field>
          <Form.Field width={6}>
            <Input
              placeholder="Enter Email"
              {...validEmail}
              type="email"
              required
            />
          </Form.Field>
          <Form.Field width={4}>
            <Button fluid primary>
              {state.selectedId ? "Update Contact" : "New Contact"}
            </Button>
          </Form.Field>
        </Form.Group>
      </Form>
    </Segment>
  );
}

export default function AddCategoryForm() {
  const context = useContext(Context);
  const { addCategory } = context;

  const [name, setName] = useState("");
  const [picture, setPicture] = useState("");

  const handleChange1 = (e, { value }) => setName({ value });
  const handleChange2 = (e, { value }) => setPicture({ value });

  const handleSubmit = () => {
    const category = {
      name: name.value,
      picture: picture.value
    };

    addCategory(category);
  };

  return (
    <Modal trigger={<Button fluid primary>Add new Category</Button>}>
      <Modal.Header>Add new Category</Modal.Header>
      <Modal.Content>
        <Form onSubmit={handleSubmit}>
          <Form.Input
            name="name"
            label="Name"
            placeholder="Category name"
            onChange={handleChange1}
            value={name.value}
          />
          <Form.Input
            name="image"
            label="Image"
            placeholder="Image URL"
            onChange={handleChange2}
            value={picture.value}
          />
          <Button type="submit">Add</Button>
        </Form>
      </Modal.Content>
    </Modal>
  );
}

function App() {
  const [author, setAuthor] = useState('')
  const [text, setText] = useState('')
  const [messages, setMessages] = useState([])

  return (
    <div className="App">
      <Form>
        <Form.Field>
          <label htmlFor="author">Author</label>
          <Input
            value={author}
            id="author"
            onChange={(evt) => setAuthor(evt.target.value)}
          />
        </Form.Field>
        <Form.Field>
          <label htmlFor="text">Message</label>
          <TextArea
            value={text}
            id="text"
            onChange={(evt) => setText(evt.target.value)}
          />
        </Form.Field>
        <Button
          basic
          onClick={() => {
            setMessages((m) => [
              {
                icon: 'pencil',
                date: new Date().toString(),
                summary: author,
                extraText: text,
              },
              ...m,
            ])
            setAuthor('')
            setText('')
          }}
        >
          Post
        </Button>
      </Form>
      <Feed events={messages} />
    </div>
  )
}

StoreForm = withSuspense(() => {
  const [state, dispatch] = React.useReducer(storeReducer, initialState)
  const [t] = useTranslation('StoreForm')

  const onChange = (field, value) => {
    onFieldChange(field, value, dispatch)
  }

  const onSubmit = () => {
    if (!mobilePhoneValidation(state.store.phoneNumber)) {
      onError("phoneNumber", t("phoneNumber.error"), dispatch)
    } else if (!timeValidation(state.store.openTime)) {
      onError("openTime", t("openTime.error"), dispatch)
    } else if (!timeValidation(state.store.closeTime)) {
      onError("closeTime", t("closeTime.error"), dispatch)
    } else {
      // TODO
    }
  }

  return (
    <Form>
      <Form.Group widths={2}>
        <InputField
          required
          name="storeName"
          label={t('storeNameLabel')}
          placeholder={t('storeNameLabel')}
          onChange={onChange}
          error={state.error}
        />
        <InputField
          required
          name="phoneNumber"
          label={t('phoneNumber.label')}
          placeholder={t('phoneNumber.label')}
          onChange={onChange}
          error={state.error}
        />
      </Form.Group>
      <Form.Group widths={2}>
        <InputField
          required
          name="openTime"
          label={t('openTime.label')}
          placeholder={t('openTime.placeholder')}
          onChange={onChange}
          error={state.error}
        />
        <InputField
          required
          name="closeTime"
          label={t('closeTime.label')}
          placeholder={t('closeTime.placeholder')}
          onChange={onChange}
          error={state.error}
        />
      </Form.Group>
      <Form.Group widths={2}>
        <InputField
          name="note"
          label={t('note.label')}
          placeholder={t('note.placeholder')}
          onChange={onChange}
          error={state.error}
        />
      </Form.Group>
      <Button type="submit" onClick={() => onSubmit()}>
        {t('submit')}
      </Button>
    </Form>
  )
})

render() {
    const { matchWhole, matchCase, color, colorBg, bold, underline } = this.props;
    return (
      <div className='App'>
        <h2>Keyword Marker: Settings</h2>
        <Form>
          <Divider />
          <Form.Field>
            <Checkbox toggle name='matchWhole' label='Match whole word' defaultChecked={Boolean(matchWhole)} onChange={this.onCheck} />
          </Form.Field>
          <Divider />
          <Form.Field>
            <Checkbox toggle name='matchCase' label='Match case' defaultChecked={Boolean(matchCase)} onChange={this.onCheck} />
          </Form.Field>
          <Divider />
          <Form.Group inline>
            <Form.Field>
              <label>Mark Color:</label>
            </Form.Field>
            <Form.Group inline>
              <Form.Field>
                <input type='color' name='colorBg' className='color-field' title='Background Color' value={colorBg} onChange={this.onColor} />
              </Form.Field>
              <Form.Field>
                <input type='color' name='color' className='color-field' title='Text Color' value={color} onChange={this.onColor} />
              </Form.Field>
            </Form.Group>
          </Form.Group>
          <Divider />
          <Form.Group inline>
            <Form.Field>
              <label>Mark Style:</label>
            </Form.Field>
            <Form.Field>
              <Button.Group>
                <Button icon='bold' name='bold' title='Bold' active={Boolean(bold)} onToggle={this.onToggle} />
                <Button icon='underline' name='underline' title='Underline' active={Boolean(underline)} onToggle={this.onToggle} />
              </Button.Group>
            </Form.Field>
          </Form.Group>
        </Form>
      </div>
    );
  }

render() {
    const { buttonText, cancelText, content, header, isLoading } = this.props;
    const { open, value, showPopup } = this.state;
    return (
      <Modal
        size="small"
        trigger={
          <Button
            primary
            fluid
            content={buttonText}
            onClick={this.show}
            loading={isLoading}
            disabled={isLoading}
          />
        }
        open={open}
        onClose={this.hide}
      >
        <Header content={header} />
        <Modal.Content>
          <p>{content}</p>
          <Form onSubmit={this.cancel}>
            <Input
              focus
              fluid
              placeholder="Enter a reason..."
              onChange={this.handleOnChange}
              ref={this.updateInputRef}
              value={value}
            />
          </Form>
          <Popup
            context={this.inputRef}
            content="Please specify a reason."
            position="bottom left"
            open={showPopup}
          />
        </Modal.Content>
        <Modal.Actions>
          <Button secondary onClick={this.hide}>
            Back
          </Button>
          <Button color="red" onClick={this.cancel}>
            <Icon name="remove" /> {cancelText}
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }

/** Top-level Access Right Component */

  render() {
    const {
      fieldPath,
      formik, // this is our access to the shared current draft
      label,
      labelIcon,
      community,
    } = this.props;

    const communityAccess = community?.access.visibility || 'public';
    const isMetadataOnly = !formik.form.values.files.enabled;

    return (
      <Card className="access-right">
        <Form.Field required>
          <Card.Content>
            <Card.Header>
              <FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />
            </Card.Header>
          </Card.Content>
          <Card.Content>
            <MetadataAccess
              recordAccess={formik.field.value.record}
              communityAccess={communityAccess}
            />

            <Divider hidden />

            <FilesAccess
              access={formik.field.value}
              accessCommunity={communityAccess}
              metadataOnly={isMetadataOnly}
            />

            <Divider hidden />

            <AccessMessage
              access={formik.field.value}
              accessCommunity={communityAccess}
              metadataOnly={isMetadataOnly}
            />

            <Divider hidden />
          </Card.Content>
          <Card.Content>
            <Card.Header as={Header} size="tiny">
              {i18next.t('Options')}
            </Card.Header>
          </Card.Content>
          <Card.Content extra>
            <EmbargoAccess
              access={formik.field.value}
              accessCommunity={communityAccess}
              metadataOnly={isMetadataOnly}
            />
          </Card.Content>
        </Form.Field>
      </Card>
    );
  }

render() {
    const { formik, onSubmit, children } = this.props;
    return (
      <Formik onSubmit={onSubmit} {...formik}>
        <Form>{children}</Form>
      </Formik>
    );
  }