@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

date-fns react-select react-dropzone react-recompose @jouwomgeving/ui-flex @jouwomgeving/ui-icon @jouwomgeving/ui-list @jouwomgeving/ui-tabs @jouwomgeving/ui-block @jouwomgeving/ui-error @jouwomgeving/ui-button @jouwomgeving/ui-events @jouwomgeving/ui-popover @jouwomgeving/ui-responsive @jouwomgeving/ui-typography

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

1 year ago

1 year ago

3 years ago

3 years ago

3 years ago

3 years ago

5 years ago

5 years ago

5 years ago

6 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

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 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

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

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

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