@truecms/form
============

> The form component contains layout, labelling and inline validations for form fields

Contents

* Install
* Dependency graph
* Tests
* Release History
* License

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Install

``shell
pnpm add @truecms/form
`

`shell
npm install @truecms/form
`


⬆ back to top


----------------------------------------------------------------------------------------------------------------------------------------------------------------

Dependency graph

`shell
form
└─ core
`


⬆ back to top


----------------------------------------------------------------------------------------------------------------------------------------------------------------

Tests

The visual test: https://design-system-components.truecms.com.au/packages/form/tests/site/


⬆ back to top


----------------------------------------------------------------------------------------------------------------------------------------------------------------

Release History

* v1.0.0 - 7f941cd: Document stewardship responsibilities under the TrueCMS organisation, lock the Node 22 baseline into the governance docs, and ship bundle parity plus dry-run release safeguards so Drupal 11 users and npm consumers remain supported

* v0.1.6 - Update core package dependency to use the latest version
* v0.1.5 - Update version for the dependency: @truecms/core
* v0.1.4 - Add margin between text area and form labels, hint text and error messages.
* v0.1.3 - Remove --save-dev flag from readme instructions.
* v0.1.2 - Remove hint text colours as they are now in core.
* v0.1.1 - Update selector to add margin-top for all input elements that are preceded by a label element
* v0.1.0 - 💥 Initial version


⬆ back to top


----------------------------------------------------------------------------------------------------------------------------------------------------------------

License

Copyright (c) Commonwealth of Australia.
Licensed under MIT.


⬆ back to top

};

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Usage


* React


⬆ back to top


----------------------------------------------------------------------------------------------------------------------------------------------------------------

$3

Usage:

`jsx
import { AUlabel, AUhintText, AUerrorText, AUformGroup, AUfieldset, AUlegend } from '@truecms/form';


// labels, hint text, and form controls here




// labels/hint text here


// form controls here


`

All props:

`jsx
text="Email" {/ The text of the label /}
dark={ true } {/ The dark variation of the component /}
inline={ true } {/ Label inline/}
/>

text="We will only use this email to respond to your query." {/ The hint text /}
dark = { true } {/ The dark variation of the component /}
alt={ false } {/ The alt variation of the component /}
/>

text="Enter an email in the valid format." {/ The error text /}
dark={ true } {/ The dark variation of the component /}
inline={ true } {/ Display the error text inline/}
/>

status="invalid" {/ Adds invalid state to form group /}
dark = { true } {/ The dark variation of the component /}
/>

dark = { true } {/ The dark variation of the component /}
/>
``