{
  "name": "TextField",
  "category": "form",
  "description": "An enhanced customizable TextField with validation support",
  "extends": ["TextInput"],
  "extendsLink": ["https://reactnative.dev/docs/textinput"],
  "modifiers": ["margin", "color", "typography"],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/FloatingPlaceholder.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/Validation.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/ColorByState.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/CharCounter.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Incubator.TextField/Hint.gif?raw=true"
  ],
  "props": [
    {"name": "color", "type": "ColorType", "description": "Input color"},
    {"name": "label", "type": "string", "description": "Field label"},
    {
      "name": "labelColor",
      "type": "ColorType",
      "description": "Field label color. Either a string or color by state map ({default, focus, error, disabled, readonly})"
    },
    {"name": "labelStyle", "type": "TextStyle", "description": "Custom style for the field label"},
    {"name": "labelProps", "type": "TextProps", "description": "Pass extra props to the label Text element"},
    {"name": "hint", "type": "string", "description": "A hint text to display when focusing the field"},
    {"name": "helperText", "type": "string", "description": "Text to display under the input"},
    {"name": "placeholder", "type": "string", "description": "The placeholder for the field"},
    {"name": "placeholderTextColor", "type": "ColorType", "description": "Placeholder text color"},
    {"name": "floatingPlaceholder", "type": "boolean", "description": "Pass to add floating placeholder support"},
    {"name": "floatingPlaceholderColor", "type": "ColorType", "description": "The floating placeholder color"},
    {
      "name": "floatingPlaceholderStyle",
      "type": "TextStyle",
      "description": "Custom style for the floating placeholder"
    },
    {
      "name": "floatOnFocus",
      "type": "boolean",
      "description": "Should placeholder float on focus or when start typing"
    },
    {"name": "leadingAccessory", "type": "ReactElement", "description": "Pass to render a leading element"},
    {"name": "trailingAccessory", "type": "ReactElement", "description": "Pass to render a trailing element"},
    {"name": "topTrailingAccessory", "type": "ReactElement", "description": "Pass to render a top trailing element"},
    {"name": "enableErrors", "type": "boolean", "description": "Should support showing validation error message"},
    {
      "name": "validate",
      "type": "Validator | Validator[]",
      "description": "A single or multiple validator. Can be a string (required, email) or custom function."
    },
    {
      "name": "validationMessage",
      "type": "string | string[]",
      "description": "The validation message to display when field is invalid (depends on validate)"
    },
    {"name": "validationIcon", "type": "IconProps", "description": "Icon left to the validation message"},
    {
      "name": "validationMessagePosition",
      "type": "ValidationMessagePosition",
      "description": "The position of the validation message (top/bottom)"
    },
    {"name": "validationMessageStyle", "type": "TextStyle", "description": "Custom style for the validation message"},
    {
      "name": "retainValidationSpace",
      "type": "boolean",
      "description": "Keep the validation space even if there is no validation message",
      "default": "true"
    },
    {"name": "validateOnStart", "type": "boolean", "description": "Should validate when the TextField mounts"},
    {"name": "validateOnChange", "type": "boolean", "description": "Should validate when the TextField value changes"},
    {"name": "validateOnBlur", "type": "boolean", "description": "Should validate when losing focus of TextField"},
    {
      "name": "onChangeValidity",
      "type": "(isValid: boolean) => void",
      "description": "Callback for when field validity has changed"
    },
    {
      "name": "onValidationFailed",
      "type": "(failedValidatorIndex: number) => void",
      "description": "Callback for when field validated and failed"
    },
    {
      "name": "fieldStyle",
      "type": "ViewStyle | (context: FieldContextType, props) => ViewStyle",
      "description": "Internal style for the field container to style the field underline, outline and fill color"
    },
    {"name": "containerProps", "type": "Omit<ViewProps, 'style'>", "description": "Container props of the whole component"},
    {"name": "containerStyle", "type": "ViewStyle", "description": "Container style of the whole component"},
    {
      "name": "preset",
      "type": "Presets | `${Presets}` | null | string",
      "description": "Predefined preset to use for styling the field"
    },
    {
      "name": "showCharCounter",
      "type": "boolean",
      "description": "Should show a character counter (works only with maxLength)"
    },
    {"name": "charCounterStyle", "type": "TextStyle", "description": "Pass custom style to character counter text"},
    {
      "name": "showClearButton",
      "type": "boolean",
      "description": "Should show a clear button when there is a value"
    },
    {
      "name": "onClear",
      "type": "() => void",
      "description": "On clear button callback"
    },
    {
      "name": "formatter",
      "type": "(value) => string | undefined",
      "description": "Custom formatter for the input value (used only when input if not focused)"
    },
    {
      "name": "centered",
      "type": "boolean",
      "description": "Whether to center the TextField - container and label"
    },
    {
      "name": "useGestureHandlerInput",
      "type": "boolean",
      "description": "Use react-native-gesture-handler instead of react-native for the base TextInput"
    },
    {
      "name": "readonly",
      "type": "boolean",
      "description": "A UI preset for read only state"
    },
    {"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"},
    {"name": "showMandatoryIndication", "type": "boolean", "description": "Whether to show a mandatory field indication"}
  ],
  "snippet": [
    "<TextField",
    "  placeholder={'Placeholder'$1}",
    "  floatingPlaceholder$2",
    "  onChangeText={onChangeText$3}",
    "  enableErrors$4",
    "  validate={['required', 'email', (value) => value.length > 6]$5}",
    "  validationMessage={['Field is required', 'Email is invalid', 'Password is too short']$6}",
    "  showCharCounter$7",
    "  maxLength={30$8}",
    "/>"
  ]
}