The ChromiaTextField provides a consistent text input experience with support for validation, icons, labels, and more.
Basic Usage
import 'package:chromia_ui/chromia_ui.dart';
ChromiaTextField(
label: 'Email',
hintText: 'Enter your email',
onChanged: (value) => print(value),
)
Variants
Text fields come in two variants:
Filled (Default)
Text field with background fill.
ChromiaTextField(
variant: ChromiaTextFieldVariant.filled,
label: 'Username',
hintText: 'Enter username',
)
Outlined
Text field with border and transparent background.
ChromiaTextField(
variant: ChromiaTextFieldVariant.outlined,
label: 'Username',
hintText: 'Enter username',
)
// Small
ChromiaTextField(
size: ChromiaTextFieldSize.small,
hintText: 'Small field',
)
// Medium (default)
ChromiaTextField(
size: ChromiaTextFieldSize.medium,
hintText: 'Medium field',
)
// Large
ChromiaTextField(
size: ChromiaTextFieldSize.large,
hintText: 'Large field',
)
With Icons
Add prefix or suffix icons:
ChromiaTextField(
label: 'Search',
prefixIcon: Icon(Icons.search),
hintText: 'Search...',
)
ChromiaTextField(
label: 'Password',
suffixIcon: Icon(Icons.visibility),
obscureText: true,
)
With Prefix/Suffix Text
ChromiaTextField(
label: 'Website',
prefixText: 'https://',
hintText: 'example.com',
)
ChromiaTextField(
label: 'Price',
prefixText: '\$',
suffixText: 'USD',
keyboardType: TextInputType.number,
)
Validation
Use built-in validators for form validation:
ChromiaTextField(
label: 'Email',
validators: [
RequiredValidator('Email is required'),
EmailValidator('Please enter a valid email'),
],
onChanged: (value) {},
)
Available Validators
- RequiredValidator - Ensures the field is not empty
- EmailValidator - Validates email format
- EqualsValidator - Ensures value equals a comparison value
- DifferentValidator - Ensures value differs from a comparison value
// Password confirmation example
ChromiaTextField(
label: 'Confirm Password',
obscureText: true,
validators: [
RequiredValidator('Please confirm your password'),
EqualsValidator(
'Passwords do not match',
compareValue: passwordController.text,
),
],
)
Error State
Display error messages:
ChromiaTextField(
label: 'Username',
errorText: 'Username is already taken',
)
Helper Text
Show helpful information below the field:
ChromiaTextField(
label: 'Bio',
helperText: 'Tell us about yourself',
maxLines: 4,
)
Character Counter
Automatically shows character count with max length:
ChromiaTextField(
label: 'Tweet',
maxLength: 280,
helperText: 'Share your thoughts',
)
Multiline Text
Create a textarea with multiple lines:
ChromiaTextField(
label: 'Description',
maxLines: 5,
minLines: 3,
hintText: 'Enter description',
)
Password Field
Create a password input field:
ChromiaTextField(
label: 'Password',
obscureText: true,
suffixIcon: Icon(Icons.visibility_off),
)
Read-Only
Make the field read-only:
ChromiaTextField(
label: 'ID',
initialValue: 'USER-12345',
readOnly: true,
)
Disabled
Disable the text field:
ChromiaTextField(
label: 'Email',
initialValue: '[email protected]',
enabled: false,
)
Keyboard Types
// Email keyboard
ChromiaTextField(
label: 'Email',
keyboardType: TextInputType.emailAddress,
)
// Number keyboard
ChromiaTextField(
label: 'Phone',
keyboardType: TextInputType.phone,
)
// URL keyboard
ChromiaTextField(
label: 'Website',
keyboardType: TextInputType.url,
)
Input Formatters
Restrict input with formatters:
import 'package:flutter/services.dart';
ChromiaTextField(
label: 'Age',
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly,
LengthLimitingTextInputFormatter(3),
],
)
Controller
Control the text field programmatically:
final controller = TextEditingController();
ChromiaTextField(
controller: controller,
label: 'Username',
)
// Clear the field
controller.clear();
// Set value
controller.text = 'new value';
Parameters
Controls the text being edited.
Defines the focus for this text field.
Initial value for the text field.
The label text displayed above the field.
The hint text displayed when the field is empty.
Helper text displayed below the field.
Error text displayed below the field.
Icon displayed at the start of the field.
Icon displayed at the end of the field.
Text displayed before the input.
Text displayed after the input.
Whether to obscure the text (for passwords).
Whether the field is enabled.
Whether the field is read-only.
The type of keyboard to show.
The action button on the keyboard.
textCapitalization
TextCapitalization
default:"none"
How to capitalize text.
Whether to enable autocorrect.
Whether to show suggestions.
Whether to autofocus on this field.
validators
List<ChromiaTextFieldValidator>
default:"[]"
List of validators to apply.
inputFormatters
List<TextInputFormatter>?
Input formatters to restrict input.
Called when the text changes.
Called when the user submits.
Called when the field is tapped.
Called when editing is complete.
variant
ChromiaTextFieldVariant
default:"filled"
The text field variant. Options: filled, outlined.
size
ChromiaTextFieldSize
default:"medium"
The text field size. Options: small, medium, large.
Custom style to override defaults.
