@saz33m1/formkit-uswdws

@saz33m1/formkit-uswdws — is a library for integrating form components from the U.S. Web Design System (USWDS) into Vue.js using FormKit.

Installation

To install the library, run the following command in your project:

npm install @saz33m1/formkit-uswdws

npm install uswds

Usage

To get started with the uswds-formkit-library, follow these steps after installation:

1. Import Modules: In your main.js or main.ts file, import the required modules and stylesheets.
2. Configure FormKit: Apply the provided configuration to enable USWDS components and globally install them.

import { createApp } from 'vue'
import App from './App.vue'

import 'uswds/css/uswds.min.css';

import { plugin, defaultConfig } from '@formkit/vue'

import { usaCheckbox, usaSelect, usaClasses } from '@saz33m1/formkit-uswdws'

const app = createApp(App)

app.use(plugin, defaultConfig({
	inputs: {
		usaCheckbox,
		usaSelect,
	},
	config: {
		classes: usaClasses
	}
}))

app.mount('#app')

After that, you can use the code in your Vue components:

<template>
  <FormKit type="usaInput" label="Type your name" id="user-name" v-model="userName" />

  <div>
    Username: {{ userName }}
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const userName = ref('')
</script>

Additionally you can use our Vue Components, as in example:

<template>
  <usa-summary-box 
		title="Key information" 
		:list="['Point 1', 'Point 2', 'Point 3']"
	/>
</template>

<script setup lang="ts">
import { UsaSummaryBox } from '@saz33m1/formkit-uswdws'

</script>

Available FormKit Component Types

usaInput

The usaInput type is used for single-line text inputs. It allows users to enter text data, such as names or email addresses.

usaTextarea

The usaTextarea type is designed for multi-line text inputs. It is ideal for capturing larger blocks of text, such as comments or descriptions.

usaSelect

The usaSelect type creates a dropdown selection menu. Users can choose one option from a predefined list, making it useful for scenarios like selecting a state or category.

usaButton

The usaButton type is used for button inputs. It allows developers to create buttons with customizable types and styles, supporting various states like disabled, active, hover, and focus. This component is essential for submitting forms or triggering actions within the interface.

usaCheckbox

The usaCheckbox type represents a single checkbox input. It allows users to toggle between two states (checked or unchecked). It is commonly used in forms for accepting terms, confirming options, or selecting individual items from a list.

usaSelect

The usaSelect type creates a dropdown selection menu. Users can choose one option from a predefined list, making it useful for scenarios like selecting a state or category.

usaDatePicker

The usaDatePicker type is used for selecting a single date. It provides a customizable date input field with optional hint text, minimum and maximum date limits, and other useful features. This component is ideal for scenarios where users need to select a specific date, such as for appointments or scheduling events.

usaDateRangePicker

The usaDateRangePicker type is designed for selecting a range of dates, including both a start and end date. Each date input is customizable with unique identifiers, labels, and optional hints. This component is useful for scenarios where users need to select a date range, such as for booking events or scheduling time periods.

usaComboBox

The usaComboBo type is designed for creating a searchable dropdown field, allowing users to filter and select from a list of predefined options. It supports customization with unique identifiers, labels, and optional placeholders. This component is ideal for situations where users need to choose from a large list of options while also having the ability to filter through them, making it useful for forms with complex data entry or extensive option sets.

usaFileInput

The usaFileInput type is designed for creating a file input field that allows users to upload one or more files. It supports customization with unique identifiers, labels, hints, and error messages. This component is ideal for situations where users need to submit documents, images, or other file types in forms. It ensures accessibility and provides flexibility for handling multiple file types and limiting file formats, making it useful for various file-upload scenarios in government or business forms.

usaTimePicker

The usaTimePicker type is designed for creating a time input field that allows users to select specific times. It supports features like minimum and maximum time limits, step intervals for precision, and customization options for labels, hints, and error messages. This component is ideal for forms that require accurate time input, such as scheduling appointments or managing event timelines.

Available Vue Component Types

UsaSummaryBox

The UsaSummaryBox component is designed to display key information in a structured and accessible way using the U.S. Web Design System (USWDS) styling. It features a prominent heading and a list of items, making it ideal for presenting summaries or important details in a concise format. The component uses ARIA attributes to enhance accessibility, ensuring users with assistive technologies can easily understand its purpose. The list content is rendered as HTML, so it is suitable for dynamic or rich text information. This component is well-suited for dashboards, reports, or any interface that requires a clear summary of key data points.

UsaAccordion

The UsaAccordion component provides a collapsible section feature, using USWDS styling. It’s ideal for organizing content into expandable sections, allowing users to toggle visibility. This is perfect for FAQs, forms, or any interface requiring space-saving content presentation.

UsaFooter

The UsaFooter offers a structured, accessible footer layout using USWDS styles. It includes sections for navigation, legal disclaimers, and other important information. The component is customizable and works well for any government or public-facing web application.

UsaHeader

The UsaHeader is a responsive, accessible header component styled with USWDS. It supports branding, navigation menus, and utility links, making it suitable for consistent and user-friendly site navigation on both desktop and mobile.

UsaList

The UsaList component renders lists with USWDS styling, supporting both ordered and unordered lists. It ensures accessibility and clear formatting, making it ideal for displaying information in a structured, readable format.

UsaProse

The UsaProse component is designed for displaying rich text content with USWDS styling. It enhances readability by ensuring consistent typography and spacing, making it perfect for articles, policy documents, or any text-heavy content.

These component types are part of the @saz33m1/formkit-uswdws, allowing for easy integration of USWDS design principles in your Vue.js applications.

Now you can use components from @saz33m1/formkit-uswdws in your application!

Documentation

Further information and usage examples will be added later.

Contributing

If you would like to contribute to the development of this library, please open an issue or create a pull request on GitHub.

License

This project is licensed under the MIT License. See the LICENSE file for details.