Warp Design System

Appearance

Text field - Elements ​

A text field is a single-line input component used for entering and editing textual data.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

Accessibility ​

If a visible label isn't specified, an aria-label must be provided to the text field for accessibility. If the field is labeled by a separate element, an aria-labelledby property must be provided using the id of the labeling element instead.

  • Always provide a visible label (do not rely on placeholder alone).
  • Do not rely on color alone for interaction feedback (e.g. error states).
  • Interaction patterns should follow platform-native expectations (e.g. tap zones, keyboard navigation, etc) and must not block accessibility tools.

When used with an affix ​

When search or clear set on the affix component it renders a button and a default aria-label. If the aria-label incorrect for your context, you may provide your own describing the action.

html
<w-affix search aria-label="Ad Search"></w-affix>
<w-affix clear aria-label="Clear text input"></w-affix>

Usage ​

html
<w-textfield label="Email" type="email"></w-textfield>

Validation ​

Set the invalid attribute to display a textfield as invalid.

invalid should be paired with help-text to provide feedback to the user about how to correct the error.

html
<w-textfield 
    label="Email"
    invalid
    help-text="An email should have an @ sign and a domain name, for example ola.nordmann@finn.no"
></w-textfield>

Examples ​

Placeholder ​

Placeholder text can be used to describe the expected value or formatting for the textfield.

Placeholder text will only appear when the textfield is empty, and must not be used as a substitute for labeling the element with a visible label.

html
<w-textfield label="Email" placeholder="ola.nordmann@finn.no"></w-textfield>

Prefix label ​

html
<w-textfield label="Price">
  <w-affix slot="prefix" label="kr"></w-affix>
</w-textfield>

Suffix Label ​

html
<w-textfield label="Price">
  <w-affix slot="suffix" label="kr"></w-affix>
</w-textfield>

Prefix Search Icon ​

html
<w-textfield label="Search">
  <w-affix slot="prefix" search></w-affix>
</w-textfield>

Suffix Search Icon ​

If you wrap the textfield with affix in a form element, clicking the search button will automatically submit the form

html
<form>
  <w-textfield label="Search">
    <w-affix slot="prefix" search></w-affix>
  </w-textfield>
</form>

Suffix Clear Icon ​

Clicking the clear button will reset the textfield

html
<w-textfield label="Search input">
  <w-affix slot="suffix" clear></w-affix>
</w-textfield>

Affix with arbitrary icon ​

html
<w-textfield label="Award">
  <w-affix slot="prefix" icon="AwardMedal"></w-affix>
</w-textfield>

Disabled ​

Keep in mind that using disabled in its current form is an anti-pattern.

There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.

Please consider more informative alternatives before choosing to use disabled on an element.

html
<div class="flex flex-col space-y-32">
  <w-textfield label="Email" disabled value="ola.nordmann@finn.no"></w-textfield>
  <w-textfield label="Email" disabled></w-textfield>
</div>

Read only ​

The readonly boolean attribute makes the w-textfield's text content immutable. Unlike disabled the w-textfield remains focusable and the contents can still be copied. See MDN docs for more information.

html
<w-textfield 
  label="Email" 
  type="email" 
  value="ola.nordmann@finn.no" 
  readonly
></w-textfield>

Styling API ​

<w-textfield> API ​

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

Properties ​

NameTypeDefaultSummary
autocompletestring | undefined-A space-separated string that hints to browsers what type of content it can suggest to autofill.
disabledbooleanfalseMakes the element not focusable and hides it from form submits
formatter (JS only)(value: string) => string-Function to format value when the input field
help-textstring-Description shown below the input field
invalidbooleanfalseMark the form field as invalid.
labelstring-Either a label or an aria-label must be provided.
maxnumber-Use with type="number" to set the maximum allowed value.
max-lengthnumber-Deprecated: Use the native maxlength attribute
maxlengthnumber-For text, search, url, tel, email and password fields, sets the maximum string length allowed.
minnumber-Use with type="number" to set the minimum allowed value.
min-lengthnumber-Deprecated: Use the native minlength attribute
minlengthnumber-For text, search, url, tel, email and password fields, sets the minimum string length required.
namestring-The name of the input field when submitting the form.
patternstring-Sets a regular expression that the input's value must match to pass validation
placeholderstring-Shown in the textfield when it doesn't have a value
read-onlybooleanfalseDeprecated: Use the native readonly attribute instead.
readonlybooleanfalseWhether the input can be selected but not changed by the user.
requiredbooleanfalseWhether user input is required on the input before form submission.
sizestring-Sets the size (width) of the input field to fit the expected length of inputs.
stepnumber-Forces number inputs to be a whole number of step
typestring-The type of input.
valuestring-Lets you set the current value.

Property Details ​

autocomplete ​

A space-separated string that hints to browsers what type of content it can suggest to autofill.

  • Type: string | undefined
  • Default: -

disabled ​

Keep in mind that using disabled in its current form is an anti-pattern.

There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.

Please consider more informative alternatives before choosing to use disabled on an element.

  • Type: boolean
  • Default: false

formatter (JS only) ​

Function to format value when the input field.

Only active when the input field does not have focus, similar to the accessible input masking example from Filament Group.

  • Type: (value: string) => string
  • Default: -

help-text ​

Use in combination with invalid to show as a validation error message, or on its own to show a help text.

  • Type: string
  • Default: -

invalid ​

Mark the form field as invalid. Make sure to also set a help-text to help users fix the validation problem.

  • Type: boolean
  • Default: false

label ​

Either a label or an aria-label must be provided.

  • Type: string
  • Default: -

max ​

Use with type="number" to set the maximum allowed value.

  • Type: number
  • Default: -

max-length ​

Deprecated: Use the native maxlength attribute

  • Type: number
  • Default: -

maxlength ​

For text, search, url, tel, email and password fields, sets the maximum string length allowed.

  • Type: number
  • Default: -

min ​

Use with type="number" to set the minimum allowed value.

  • Type: number
  • Default: -

min-length ​

Deprecated: Use the native minlength attribute

  • Type: number
  • Default: -

minlength ​

For text, search, url, tel, email and password fields, sets the minimum string length required.

  • Type: number
  • Default: -

name ​

The name of the input field when submitting the form.

  • Type: string
  • Default: -

pattern ​

Sets a regular expression that the input's value must match to pass validation

  • Type: string
  • Default: -

placeholder ​

Set a text that is shown in the textfield when it doesn't have a value.

Placeholder text should not be used as a substitute for labeling the element with a visible label.

  • Type: string
  • Default: -

read-only ​

Deprecated: Use the native readonly attribute instead.

  • Type: boolean
  • Default: false

readonly ​

Whether the input can be selected but not changed by the user.

  • Type: boolean
  • Default: false

required ​

Whether user input is required on the input before form submission.

  • Type: boolean
  • Default: false

size ​

Sets the size (width) of the input field to fit the expected length of inputs.

  • Type: string
  • Default: -

step ​

When used with number this attribute forces inputs to be a whole number of step.

For example with a step="5" only values that divide evenly on 5 are allowed. Using arrow up and down in the input field increments and decrements by 5.

  • Type: number
  • Default: -

type ​

The type of input.

  • Type: string
  • Default: -

value ​

Lets you set the current value.

  • Type: string
  • Default: -

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system