Design

Input consists of a label and an input field. Inputs follow a minimal design with stronger visual affordance given when a user is interacting with the field. For example, active state utilizes a strong border around the perimeter of the Input to provide strong contrast if being used within a field set or form. This ensures optimal recognition while respecting the modern push for minimalism.

Examples

Please enter your first name

Usage

Inputs can be used as a singular object in a layout, or they can be paired together to form a “field-set” where information is closely related. For example, a field set might include an Input for ‘first name’ and an Input for ‘last name.’

Label Guidelines:

  • keep label text descriptive, unambiguous and concise
  • be consistent with capitalization of label text (title case or sentence case)
  • labels should fit on a single line
  • use natural language if necessary (e.g. instead of “Issued by” consider “Which bank issued your card?”)
  • asterisks should be used on required fields

Field Guidelines:

  • keep field sizes consistent within a page
  • one field per row unless the fields are closely related (e.g. First Name and Last Name or City, State)
  • where appropriate a max field size and character limit should be included

Input

Props

NameDescriptionTypeRequiredDefault
modelValuevalue to be placed in the InputStringfalse-
labeltext label for the InputStringtrue-
hinthint text to be displayed below the InputStringfalse-
errorerror text to be displayed below the InputStringfalse-
clearlabel for the clear link that will appear at the end of the Input when it has a valueStringfalse""
typetype of underlying InputStringfalse"text"
disabledputs the Input into a disabled stateBooleanfalsefalse
maxlengthmaximum amount of characters this Input will acceptNumberfalse0 - no limit
hideLabelhides the label for the Input in scenarios like tables where it would get in the wayBooleanfalse-
idan ID that can be will be assigned to the input elementStringfalse-
schemaa schema for use in validationObjectfalse-

Events

  • update:modelValue - emitted when the Input value changes, payload is the new text

Slots

  • pre - content will appear before the Input but inside the border. Should only be used for icons
  • post - content will appear after the Input but inside the border. Should only be used for icons

data-ref-ids

  • feather-input - on the input element
  • feather-input-count - on the div that wraps the character count
  • feather-form-element-label - on the label text element
  • feather-form-element-hint - on the hint text element
  • feather-form-element-error - on the error text element

Attributes

Specifying an class or data-ref-id attribute will cause them to be applied to the component root container div. All other attributes are inherited to the input where applicable. Some will be ignored if they conflict with attributes used for accessibility.

ValidationHeader

This is an element designed to be used in conjunction with forms using the yup validation library. This component displays a list of errors and links to the errored fields which helps in best practices for form validation. Please see the examples in the Form Validation page

Props

NameDescriptionTypeRequiredDefault
errorListan array of yup ValidationError objects produced by validationArrayfalse[]

data-ref-ids

  • feather-validation-header - the root element