HelperText · Glowup

Glowup

INPUTS · 44 / 89

HelperText

HelperText — a Material You inputs component for React Native and web.

󱀫

packages/ui/src/components/HelperText.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Maximum 8 characters

Properties

5 controls

Text

Type

Visible

Disabled

Padding

Usage

HelperText.tsx

<HelperText> Maximum 8 characters </HelperText>

Variants

The states and shapes this component is meant to be used in.

Types

Maximum 8 characters

󰗖

Enter a valid email address

This field cannot be edited

Under a control

Controls without their own error prop borrow it

I accept the terms

󰗖

You must accept the terms to continue

Alongside input

󰗖

Missing the @

Phone

Include the country code

Hidden

visible=false fades out but keeps its space, so the field never jumps

Hidden text

Visible text

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

8 on HelperTextProps

children

required

React.ReactNode

containerStyle

StyleProp<ViewStyle>

disabled

boolean

default: false

Dims the text to match a disabled field.

padding

"normal" | "none"

default: "normal"

`none` removes the 16px gutter that aligns the text with the field body.

style

StyleProp<TextStyle>

testID

string

type

HelperTextType

default: "info"

`error` switches to the error role and shows the alert glyph.

visible

boolean

default: true

Fades the text out instead of unmounting it, so the field doesn't jump.