Forms

Input

A text input with a label, help text, and prefix/suffix slots.

fandry-input

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`label`	`string`	`''`	Visible label.
`help-text`	`string`	`''`	Helper text below the field.
`error-text`	`string`	`''`	An error shown under the field: the field is invalid while it has one (`aria-invalid`, the `invalid` state), and a screen reader hears it when it appears and when the field is focused.
`type`	`string`	`'text'`	Native input type (email, password, ...).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Field size.
`disabled`	`boolean`	`false`	Disables the field.
`label · help-text · error-text (slots)`	`slot`	`the props`	Markup in place of the label, help text or error text (a link, an icon). Shown even without the matching prop.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`base`	The outermost element.
`label`	The label.
`control`	The box the field draws: a text field's border, a select's button, a checkbox's box, a radio's circle, a switch's track.
`prefix`	The wrapper of the prefix slot.
`input`	The native `<input>`.
`suffix`	The wrapper of the suffix slot.
`help-text`	The help text under the field.
`error-text`	The error under the field. In the page even while empty, so style it only for a field that is `invalid`.
`required`	The required-field asterisk.

States are extra names on a part while the state is on. Name both to style one state, e.g.fandry-checkbox::part(control checked).

State	Description
`disabled`	A control, option or item that cannot be used.
`invalid`	A field that has error text.

<!-- template -->
<div class="brand narrow">
  <fandry-input label="Email" type="email" placeholder="you@brand.com" required>
    <span slot="help-text">We'll send your receipt here. <a href="#privacy">How we use it</a></span>
  </fandry-input>
</div>

/* css */
/* Scoped to this demo. Set the same --fd-* tokens on :root to theme
   every fandry-* component on the site. */
.brand {
  --fd-radius-md: 999px;
  --fd-border: 160 30% 80%;
  --fd-border-focus: 160 84% 36%;
  --fd-ring-color: 160 84% 36%;
}

fandry-input::part(control) {
  padding-inline: 1rem;
  background: hsl(160 40% 98%);
}

fandry-input::part(label) {
  font-weight: 700;
}

fandry-input::part(required) {
  color: hsl(160 84% 26%);
}

fandry-input::part(help-text) {
  font-style: italic;
}

Code

Link to section Code

<fandry-input label="Email" type="email" placeholder="you@company.com"></fandry-input>

Example: An error

Link to section Example: An error

Code

<!-- template -->
<fandry-input label="Email" type="email" required
  help-text="We'll send the receipt here."
  error-text={emailError} value={email}
  oninput={handleInput} onchange={handleChange}></fandry-input>

// component
email = '';
emailError = '';

// Checked when the field is left: an error while still typing is noise.
handleChange(event) {
  this.email = event.detail;
  this.emailError = this.check(this.email);
}

// Once there is an error, it goes as soon as the value is right.
handleInput(event) {
  this.email = event.detail;
  if (this.emailError) this.emailError = this.check(this.email);
}

// A field is invalid while it has error text: there is no separate flag.
// The control gets aria-invalid and the error as its description, and a
// screen reader hears the error when it appears. Textarea, select,
// combobox and lookup take error-text the same way.
//
// Markup instead of a string goes in the slot:
//   <span slot="error-text">Taken. <a href="/login">Sign in?</a></span>

/* css: the field while it is invalid, and the message */
fandry-input::part(control invalid) { background: hsl(0 80% 98%); }
fandry-input::part(error-text) { font-weight: 600; }