Formfields

Examples

<nxt-input value="Hello" label="Name"> </nxt-input>

<nxt-textarea placeholder="Add your comments here ..." label="Comment"></nxt-textarea>

<nxt-input disabled value="Hello" label="Name"></nxt-input> <nxt-input disabled label="Age"></nxt-input>

<nxt-input invalid value="Hello" label="Name"></nxt-input>

+49

Euro

<nxt-input label="Phone number">
  <span slot="prefix">+49</span>
</nxt-input>

<nxt-input label="Amount" type="number">
  <span slot="suffix">Euro</span>
</nxt-input>

<nxt-input label="Amount" type="number">
  <nxt-icon name="info-circle-o" slot="appendix"></nxt-icon>
</nxt-input>

Enter date in format DD/MM/YYYY

<nxt-input label="Date of birth">
  <span slot="hint">Enter date in format DD/MM/YYYY</span>
</nxt-input>

<nxt-input label="Name" placeholder="Enter your name"> </nxt-input>

submit

+49 Euro Enter date in format DD/MM/YYYY

<div style="display: flex;">
  <nxt-input label="Name" outline="true"> </nxt-input>
  <nxt-button style="margin-top: 28px; margin-left: 12px;" appearance="small-medium">submit</nxt-button>
</div>
<nxt-input label="Name" placeholder="Enter your name" outline="true">
  <span slot="prefix">+49</span>
  <span slot="suffix">Euro</span>
  <span slot="hint">Enter date in format DD/MM/YYYY</span>
</nxt-input>

<nxt-input label="Name" placeholder="Enter your name" outline="true" invalid>
  <span slot="prefix">+49</span>
  <span slot="suffix">Euro</span>

  <span slot="hint">Enter date in format DD/MM/YYYY</span>
</nxt-input>

<nxt-input label="Name" placeholder="Enter your name" outline="true" disabled>
  <span slot="prefix">+49</span>
  <span slot="suffix">Euro</span>
  <span slot="hint">Enter date in format DD/MM/YYYY</span>
</nxt-input>

<nxt-textarea outline placeholder="Add your comments here ..." label="Comment"></nxt-textarea>

import '@nxt/ndbx-components/formfield';

NxtInput

This is an input component replacing the default HTML input tag.

Tag: nxt-input

Slots

Name	Description
`prefix`	A prefix displayed in front of the value.
`suffix`	A suffix displayed after the value.
`hint`	A hint containing additional descriptions for the input.
`appendix`	An appendix displayed after the input field, like an info icon.

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Whether the input is disabled.
`invalid`	`invalid`	`boolean`	`false`	Whether the input is invalid.
`label`	`label`	`string`	`''`	The label of the input. Must be set for accessibility compliance.
`outline`	`outline`	`boolean`	`false`	Whether the input is rendered with an outline or not.
`placeholder`	`placeholder`	`string`	`''`	Placeholder for the input.
`type`	`type`	`NxtInputType`	`'text'`	Type of the input. Similar to the native input[type] attribute.
`value`	`value`	`string`	`''`	The value of the input.

NxtTextarea

This is a textarea component. Replacement for the native textarea tag.

Tag: nxt-textarea

Slots

Name	Description
`prefix`	A prefix displayed in front of the value.
`suffix`	A suffix displayed after the value.
`hint`	A hint containing additional descriptions for the textarea.
`appendix`	An appendix displayed after the textarea, like an info icon.

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Whether the textarea is disabled.
`invalid`	`invalid`	`boolean`	`false`	Whether the textarea is invalid.
`label`	`label`	`string`	`''`	The label of the textarea. Must be set for accessibility compliance.
`outline`	`outline`	`boolean`	`false`	Whether the textarea is rendered with an outline or not.
`placeholder`	`placeholder`	`string`	`''`	The placeholder for this textarea.
`rows`	`rows`	`number`		The number of rows of the textarea.
`value`	`value`	`string`	`''`	Value of the textarea.

Type Aliases

NxtInputType