@dpc-sdp/ripple-ui-forms NPM

Ripple UI Forms

A form component library built with Formkit. View the Ripple storybook to start exploring available components.

Form fields can be used individually <RplFormInput> to handcraft form experiences. However, using the <RplForm> component and providing a form schema provides a simpler way to define and generate forms.

<template>
  <RplForm
    id="shorten-url"
    title="URL Shorten"
    :schema="[
      {
        $formkit: 'RplFormEmail',
        label: 'Email Address',
        id: 'email',
        name: 'email',
        validation: 'required'
      },
      {
        $formkit: 'RplFormActions',
        label: 'Subscribe',
        id: 'submit'
      }
    ]"
    :submissionState="{
      status: 'error',
      title: 'Error',
      message: 'Sorry, something went wrong.'
    }"
    @submit="({ data }) => { postFormData(data) }"
  >
  </RplForm>
</template>

SDP Platform (Tide)

If you're using this package within a Tide environment you don't need to directly install it, it will be installed as a dependency of @dpc-sdp/nuxt-ripple and all components will be available globally, if you wish to be explicit you can import them from #components.

The details below relate to using this package outside of Tide.

Installation

npm install @dpc-sdp/ripple-ui-forms

Usage (Nuxt)

Ripple UI Forms exports a nuxt module that you can add to your nuxt config, note the addition of /nuxt.

export default defineNuxtConfig({
  modules: [
    '@dpc-sdp/ripple-ui-forms/nuxt'
  ]
})

There is no need to import the components as they will be registered globally by the nuxt module.

<template>
  <RplFormInput id="name" name="name" type="text" />
</template>

Usage (Vue)

To use a component, import it from @dpc-sdp/ripple-ui-forms/vue, note the addition of /vue.

<script setup>
  import { RplFormInput } from '@dpc-sdp/ripple-ui-forms/vue';
</script>

<template>
  <RplFormInput id="name" name="name" type="text" />
</template>

@dpc-sdp/ripple-ui-core @formkit/inputs @formkit/nuxt @formkit/validation @formkit/vue @nuxt/kit @vueuse/core date-fns

@everything-registry/sub-chunk-254 @dpc-sdp/ripple-tide-landing-page @dpc-sdp/ripple-tide-search @dpc-sdp/nuxt-ripple @infinitebrahmanuniverse/nolb-_dp

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago