Search field | RiseUI

Search input with icon, clear action, validation, and variants — aligned with @heroui/react SearchField and search-field.css.

Usage

Basic search input.

const RiseSearchField(
  label: Text('Search'),
  hintText: 'Search...',
)

With description

Label + helper text.

const RiseSearchField(
  label: Text('Search products'),
  description: Text('Enter keywords to search for products'),
)

Required field

Required indicator with helper text.

const RiseSearchField(
  label: Text('Search query'),
  isRequired: true,
  description: Text('Minimum 3 characters required'),
)

Validation

Invalid state with field error.

RiseSearchField(
  label: const Text('Search'),
  isInvalid: query.isNotEmpty && query.length < 3,
  errorMessage: const Text('Search query must be at least 3 characters'),
)

Disabled

Non-interactive search field.

const RiseSearchField(
  label: Text('Search'),
  enabled: false,
)

Controlled

External value and clear action.

RiseSearchField(
  controller: controller,
  onChanged: (_) => setState(() {}),
  onClear: () => setState(() {}),
)

Full width

Stretches to available width.

const RiseSearchField(
  fullWidth: true,
  hintText: 'Full width search...',
)

Variants

primary and secondary styles.

const RiseSearchField(
  variant: RiseSearchFieldVariant.secondary,
  hintText: 'Search...',
)