Skip to main content

TextInput Component Documentation

The TextInput component is a versatile and reusable input field in React, offering various subcomponents for different input types such as date, text, copyable text, and phone numbers. Each subcomponent shares a consistent API, allowing for easy integration and customization within your application.

1. TextInput Component​

Props​

  • label: string - The label text for the input field.
  • state: enum - The state of the input field. Can be one of the following:
    • 'default': Standard state.
    • 'error': Indicates an error state.
    • 'disabled': Disables the input field.
  • placeholder: string - The placeholder text within the input field.
  • value: string - The initial value of the input field.
  • size: enum - The size of the input field. Can be one of the following:
    • 'xs': Extra small.
    • 'sm': Small.
    • 'md': Medium (default).
  • required: bool - Indicates whether the field is required.

Usage example​

<TextInput label="Text Input" size="xs" state="default" />
<TextInput label="Text Input" size="sm" state="disabled" />
<TextInput label="Text Input" size="md" state="error" />

2. TextInput.Date Component​

The TextInput.Date component is used for date selection with an integrated date picker.

Props​

  • label: string - The label text for the input field.
  • state: enum - The state of the input field.
  • size: enum - The size of the input field.
  • required: bool - Indicates whether the field is required.
  • defaultDate: Date - The default date to display in the input field.

Usage Example​

<TextInput.Date defaultDate={new Date()} size="sm" state="disabled" />
<TextInput.Date size="md" state="error" />

3. TextInput.Copy Component​

The TextInput.Copy component allows users to input and copy text to the clipboard.

Props​

  • label: string - The label text for the input field.
  • state: enum - The state of the input field.
  • placeholder: string - The placeholder text within the input field.
  • value: string - The initial value of the input field.
  • size: enum - The size of the input field.
  • required: bool - Indicates whether the field is required.

Usage Example​

<TextInput.Copy placeholder="example.com" label="Website" size="xs" state="default" />
<TextInput.Copy placeholder="example.com" label="Website" size="sm" state="disabled" />
<TextInput.Copy placeholder="example.com" label="Website" size="md" state="error" />

4. TextInput.Text Component​

The TextInput.Text component is a standard text input field that can also display a prefix label.

Props​

  • label: string - The label text for the input field.
  • state: enum - The state of the input field.
  • placeholder: string - The placeholder text within the input field.
  • value: string - The initial value of the input field.
  • size: enum - The size of the input field.
  • required: bool - Indicates whether the field is required.
  • inputLabelText: string - The prefix label displayed inside the input field.
<TextInput.Text inputLabelText="https://" placeholder="example.com" label="Website" size="xs" state="default" />
<TextInput.Text inputLabelText="https://" placeholder="example.com" label="Website" size="sm" state="disabled" />
<TextInput.Text inputLabelText="https://" placeholder="example.com" label="Website" size="md" state="error" />

5. TextInput.PhoneNumber Component​

The TextInput.PhoneNumber component is designed for phone number input with a dropdown for selecting country codes.

Props​

  • label: string - The label text for the input field.
  • state: enum - The state of the input field.
  • placeholder: string - The placeholder text within the input field.
  • value: string - The initial value of the input field.
  • size: enum - The size of the input field.
  • required: bool - Indicates whether the field is required.

Usage Example​

<TextInput.PhoneNumber placeholder="(555) 000-0000" label="Phone Number" size="xs" state="default" />
<TextInput.PhoneNumber placeholder="(555) 000-0000" label="Phone Number" size="sm" state="disabled" />
<TextInput.PhoneNumber placeholder="(555) 000-0000" label="Phone Number" size="md" state="error" />

Dependencies​

RepositoryUsage Count
frontend-app-staff-dashboard18
frontend-app-dashboard2
frontend-app-account1

Detailed usage locations:​

frontend-app-staff-dashboard

  • src/components/BillingForm/index.jsx
  • src/pages/calendar/index.jsx
  • src/pages/create-program/index.jsx
  • src/pages/organizations/CreateOrganisation.jsx
  • src/pages/platform-settings/customization/appearance/BannerEdit.jsx
  • src/pages/platform-settings/customization/contact-information/index.jsx
  • src/pages/platform-settings/integrations/services/AzureAIInputs.jsx
  • src/pages/platform-settings/integrations/services/ClarityInputs.jsx
  • src/pages/platform-settings/integrations/services/GoogleTagManagerInputs.jsx
  • src/pages/platform-settings/integrations/services/KinescopeInputs.jsx
  • src/pages/platform-settings/integrations/services/OpenAIInputs.jsx
  • src/pages/platform-settings/integrations/services/StripeInputs.jsx
  • src/pages/platform-settings/integrations/services/TavilyInputs.jsx
  • src/pages/program-single/settings/index.jsx
  • src/pages/users/AddUsersDrawer.jsx
  • src/pages/users/teams/CreateTeamDrawer.jsx
  • src/pages/utilities/notifications/NotificationsDrawer.jsx
  • src/pages/view-ticket/MessageInput.jsx

frontend-app-dashboard

  • src/pages/support/InputDrawerSupport.jsx
  • src/pages/support/view-ticket/MessageInput.jsx

frontend-app-account

  • src/BlendxSettings/profile-details/index.jsx