
Security News
Node.js Moves Toward Stable TypeScript Support with Amaro 1.0
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
@dbp-toolkit/form-elements
Advanced tools
This package offers form components to be used to create an HTML form.
You can install this component via npm:
npm i @dbp-toolkit/form-elements
<dbp-form-string-element></dbp-form-string-element>
<script type="module" src="node_modules/@dbp-toolkit/form-elements/dist/string.js"></script>
Or directly via CDN:
<dbp-form-string-element></dbp-form-string-element>
<script
type="module"
src="https://unpkg.com/@dbp-toolkit/form-elements@0.2.0/dist/string.js"></script>
Best look at demo.js for the example implementation.
lang
(optional, default: de
): Language setting
de
(German) or en
(English)<element lang="en"></element>
name
: Element name
description
: Descriptive text for the element
label
: Display label for the element
value
: Current value of the element
required
: Indicates if the element is mandatory
hidden
: Indicates if the element is hidden
true
disabled
: Indicates if the element is disabled
true
customValidator
: Custom validation function
<element .customValidator=${(value, evaluationData) => {return value === 'test' ? ['My message'] : []}}></element>
rows
(optional, default: 1
): Number of rows for the text area (1 means a single-line input)
<dbp-form-string-element rows="3"></dbp-form-string-element>
placeholder
(optional): Placeholder text for the input field
<dbp-form-string-element placeholder="Short phrase that hints at the expected data"></dbp-form-string-element>
value
: Use the string true
or false
to set the value
<dbp-form-boolean-element value="true"></dbp-form-boolean-element>
state
: Instead of value
you can also use state
to set the state of the boolean element as a boolean
data-value
: Returns the state of the boolean element
The change
event is fired when the state changes. The event contains the new state in e.detail.state
as a boolean.
<dbp-form-boolean-element
subscribe="lang"
name="myBoolean"
label="My label"
description="My description"
.value=${this.myBoolean ? 'true' : 'false'}
@change="${(e) { console.log('state', e.detail.state); }}>
</dbp-form-boolean-element>
<dbp-form-boolean-element
subscribe="lang"
name="myBoolean"
label="My label"
description="My description"
.state=${this.myBoolean}
@change="${(e) { console.log('state', e.detail.state); }}>
</dbp-form-boolean-element>
min
: Indicates the minimum value that can be entered
max
: Indicates the maximum value that can be entered
<dbp-form-enum-element
${ref(this.myComponentEnumRef)}
subscribe="lang"
name="myComponentEnum"
label="My enum"
value=${data.myComponentEnum || ''}
.items=${{item1: 'Item 1', item2: 'Item 2'}}
multiple
required>
<span slot="label">
Label with HTML content. Can be used interchangeably the label property.
</span>
</dbp-form-enum-element>
items
: List of items to select from
<dbp-form-enum-element .items=${{item1: 'Item 1', item2: 'Item 2'}}></dbp-form-enum-element>
multiple
(optional, default: false
): Indicates if multiple items can be selected
<dbp-form-enum-element multiple></dbp-form-enum-element>
display-mode
(optional, default: dropdown
): Render as checkbox or radiobutton in list
mode, select element in dropdown
mode
<dbp-form-enum-element display-mode="list"></dbp-form-enum-element>
They are a little similar to the form element components. Best look at demo.js for the example implementation.
lang
(optional, default: de
): Language setting
de
(German) or en
(English)<view lang="en"></view>
label
: Display label for the view
value
: Current value of the view
hidden
: Indicates if the view is hidden
true
# get the source
git clone git@github.com:digital-blueprint/toolkit.git
cd toolkit/packages/form-elements
# install dependencies
npm install
# constantly build dist/bundle.js and run a local web-server on port 8002
npm run watch
# run tests
npm test
# build local packages in dist directory
npm run build
Jump to http://localhost:8002 and you should get a demo page.
FAQs
Form elements for the Digital Blueprint Toolkit
We found that @dbp-toolkit/form-elements demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.