@jouwomgeving/ui-form NPM

Form

$ npm install @jouwomgeving/ui-form

Usage

import * as Form from '@jouwomgeving/ui-form';

function Layout() {
  return (
    <Form.Form>

      <Form.Header>Dit is een formulier</Form.Header>

      <Form.Fieldset title="Dit is een fieldset">

        <Form.Field
          label="Voornaam"
          direction="horizontal"
          helpText="Cras justo odio, dapibus ac facilisis in, egestas eget quam."
        >
          <Form.Input
            placeholder="Vul hier je voornaam in.."
          />
        </Form.Field>

      </Form.Fieldset>

      <Form.Fieldset title="Dit is een ander fieldset">

        <Form.Field
          label="Voornaam"
          direction="horizontal"
          helpText="Cras justo odio, dapibus ac facilisis in, egestas eget quam."
        >
          <Form.Input
            placeholder="Vul hier je voornaam in.."
          />
        </Form.Field>

        <Form.Field
          label="Nieuwsbrief ontvangen"
          direction="horizontal"
        >
          <Form.Switch
            checked
            disabled
            onChange={() => {}}
          />
        </Form.Field>

      </Form.Fieldset>
    </Form.Form>
  )
}

export default Layout

Components

Form

About

The basic form component. Wraps Fields and Fieldsets. No custom styling yet.

Header

About

Form Header component. Wraps children in H1 with a border.

Properties

Prop	Values	Default	Required
children	ReactElement		false

Fieldset

About

The fieldset wraps any number of field components. TODO: Fieldsets should be able to display a number in front of the title

Properties

Prop	Values	Default	Required
children	ReactElement		false
title	string		true

Field

About

The Field component wraps a Input component and delivers a label and helptext on correct places. Is provided with aria-attributes for screenreaders.

Properties

Prop	Values	Default	Required
children	ReactElement		false
label	string		false
helpText	string		false
direction	enum	vertical	true

Hoc Components and Object Composition

TLDR; added multiple HoC containers for forms Components. These in general will handle:

Events: before a call from each component was necessary to call Parent / WrappedContainer (callParent), these events where not stacked. Events are now handled with composition; each HoC can receive multipe events, these events are stacked and called by any which is { enhanced => with => Events }.

Changelog

recompose classnames

@jouwomgeving/jo-card @jouwomgeving/jo-dashboard @jouwomgeving/ui-richtexteditor

2 years ago

2 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

0.0.2-alpha.f19605ca-alpha.d00a59aa

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago

10 years ago