SearchBox constructor

SearchBox({
  1. String? value,
  2. String placeholder = 'Search',
  3. String? label,
  4. String? name,
  5. bool disabled = false,
  6. String? className,
  7. Map<String, Object?> props = const {},
  8. Map<String, Object?> inputProps = const {},
  9. Map<String, Object?> style = const {},
  10. DartStyle? dartStyle,
  11. void onChanged(
    1. Object event
    )?,
  12. void onSubmit(
    1. Object event
    )?,
})

Creates a search box.

Implementation

SearchBox({
  String? value,
  String placeholder = 'Search',
  String? label,
  String? name,
  bool disabled = false,
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> inputProps = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
  void Function(Object event)? onChanged,
  void Function(Object event)? onSubmit,
}) : super(
        'form',
        props: mergeComponentProps(
          {
            ...props,
            'role': props['role'] ?? 'search',
            if (onSubmit != null) 'onSubmit': onSubmit,
          },
          className: className,
          defaultStyle: const {
            'display': 'flex',
            'align-items': 'center',
            'gap': '8px',
          },
          dartStyle: dartStyle,
          style: style,
        ),
        children: [
          if (label != null)
            FlintElement(
              'label',
              props: const {
                'style': {
                  'font-size': '14px',
                  'font-weight': 600,
                  'color': '#344054',
                },
              },
              children: normalizeChildren(label, const []),
            ),
          FlintElement(
            'input',
            props: mergeComponentProps(
              {
                ...inputProps,
                'type': 'search',
                if (name != null) 'name': name,
                if (value != null) 'value': value,
                'placeholder': placeholder,
                if (label == null) 'aria-label': placeholder,
                if (disabled) 'disabled': true,
                if (onChanged != null) 'onInput': onChanged,
              },
              defaultStyle: const {
                'min-height': '38px',
                'min-width': '220px',
                'border': '1px solid #d0d5dd',
                'border-radius': '8px',
                'padding': '0 10px',
                'font': 'inherit',
              },
            ),
          ),
        ],
      );