Input Field

Overview

DIGIT UI components include various text input fields with optional features such as character count display, inner labels, and help text. These fields also come with built-in validation support for improved data integrity.

Input Field Type

  • Text Input Field: A text input field for general alphanumeric data.

  • Text Area Input Field: For multi-line text input.

  • Search Input Field: Designed for search queries or search-related inputs.

  • Password Input Field: A secure input field for password entry.

  • Numeric Input Field: This field is suitable for numeric input.

  • Date Input Field: An input field designed to capture dates.

  • Time Input Field: Use this field to input time values.

  • Location Input Field: Specifically for geographic location data, such as coordinates.

Properties

These are some common props which can be sent inside all the input fields:

Name                              Description
controller(required)             textEditing Controller for input field
label                            label for input field
readOnly                        determines if the input field is read-only or not
isRequired                      determines if the input field is required or not
isDisabled                      indicates where the field is disabled or not
info                            boolean to show the tooltip
infoText                         customize the tooltip text
charCount                       boolean to show the char count
innerLabel                      inner label for input field
helpText                         help message to display below the text field
validations                     a list of validations can be passed
initialValue                     initial value for the field
keyBoardType                      customize keyboard type
textInputFormatter               list of filterTextInputFormatter
onTap                           a call-back function when the user taps on the field
suffixText                       a text which will be shown as a suffix
prefixText                      a text which will be shown as a prefix
suffixIcon                       an icon which will be shown as a suffix
textAreaScroll                 defines the scroll behaviour for textArea

TextAreaScroll

smart                           height will increase based on the input
vertical                        can be increased height by vertical drag
none                            height and width will not change

Configuration

Text Input Field

Usages

InputField(
  Type: InputType.text,
  label: "Text Field",
  initialValue: 'value',
  controller: TextEditingController(),
  innerLabel: 'label',
  helpText: 'help text',
  charCount: true,
);

TextArea Input Field

Usages

InputField(
  Type: InputType.textArea,
  label: "Text Area",
  controller: TextEditingController(),
  helpText: 'help text',
);

Search Input Field

Usages

InputField(
  Type: InputType.search,
  label: "Search Field",
  controller: TextEditingController(),
  helpText: 'help text',
  onSuffixTap: (value){},
);

Password Input Field

Usages

InputField(
  Type: InputType.password,
  label: "password Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Numeric Input Field

Usages

InputField(
  Type: InputType.numeric,
  label: "Numeric Field",
  controller: TextEditingController(),
  helpText: 'help text',
  initialValue: '0',
  step: 1,
);

Date Input Field

Usages

InputField(
  Type: InputType.date,
  label: "Date Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Time Input Field

Usages

InputField(
  Type: InputType.time,
  label: "Time Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Location Input Field

Usages

InputField(
  Type: InputType.location,
  label: "Location Field",
  controller: TextEditingController(),
  helpText: 'help text',
);

Last updated

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.