Components

Textfield

Used to enter spesific text input form

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Textfields allow user input. The border should light up simply and clearly indicating which field the user is currently editing.

import { Textfield } from 'legion-ui';

Variant

Legion-ui have seven variant of textfield

Basic

Here’s the default behavior of textfield with placeholder attribute set.

<Textfield placeholder="Name" />

you can costumize textfield with normal, success, and error.

<Textfield placeholder="Name" />
<Textfield placeholder="Company" variant="success" />
<Textfield placeholder="Email" variant="error" />

Icon

You can insert icon beside the textfield area, the available area is either on the left side, on the right side, or both. We use react-feather to accomodate our iconography needs. But to make our development more seamless, we decided to wrap the icons inside the <DynamicIcon /> component. Full list of available react-feather icons can be found via FeatherIcon’s website.

<Textfield
  placeholder="Name"
  iconLeft={<DynamicIcon name="User" />}
/>

<Textfield
  placeholder="Email"
  variant="success"
  iconRight={<DynamicIcon name="Mail" />}

Prefix

You also can insert prefix in textfield on the left side, on the right side, or both.

Rp.

Unit

@mail.com

<Textfield addonLeft="Rp."/>
<Textfield addonRight="Unit" variant="success"/>
<Textfield addonLeft="Email" addonRight="@mail.com" variant="error" />

Label

Add a label for each field to make it easier for users to enter values.

@mail.com

EmailOptional

  <Textfield
    iconLeft={<DynamicIcon name="Mail" />}
    addonRight="@mail.com"
    label="Email"
  />
//label with help
 <Textfield
    label="Email"
    labelHelp="This is a help tooltip" />

Disabled

Make textfield look inactive by adding the disabled attribute.

<Textfield placeholder="Company" disabled />

Error

Add Error Message to Textfield with prop errorMessage, which could be error.

Error Message

    <Textfield
      placeholder="Placeholder..."
      errorMessage="Error Message"
      variant="error"/>

    //add icon Error Message
    <Textfield
      placeholder="Placeholder..."
      errorMessage="Error Message"

Caption

You can add a caption below Textfield

Caption

<Textfield placeholder="Placeholder..." caption="Caption" captionIcon={<DynamicIcon name="AlertCircle" />} />

Attribute

You can customize textfield with attributes, anchors in legion have only one attribute which is size

Size

The textfield has three sizes lg, md, or sm.

  <Textfield
    placeholder="Textfield Large..."
    size="lg"/>

  <Textfield
    placeholder="Textfield Medium..."
    size="md"/>

  <Textfield

Props

property	propType	required	default	description
disabled	`boolean`	-	`false`	Disabled state of textfield
iconLeft	`React.ReactNode`	-	-	Add icon to the left side of the textfield
iconRight	`React.ReactNode`	-	-	Add icon to the right side of the textfield
label	`string`	-	-	Adds helper text above your textfield element
addonLeft	`React.ReactNode` \| `string`	-	-	Add pre text inside the textfield
addonRight	`React.ReactNode` \| `string`	-	-	Add pre text inside the textfield
style	object	-	-	The `style` prop lets you style elements inline
variant	`normal` \| `success` \| `error`	-	`normal`	Change the state and outline of the textfield
errorMessage	`string`	-	-	Add message to the error message
errorMessageIcon	`React.ReactNode`	-	-	Add icon to the error message
labelHelp	`string`	-	-	Add a help text tooltip to the label
labelOptional	`Boolean`	-	-	Add optional label
caption	`string`	-	-	Add field caption
captionIcon	`React.ReactNode`	-	-	Add icon to the caption
size	`lg` \| `md` \| `sm`	-	`md`	The size of the textfield box

Do you have feedback?

Please let us know to make it better

Send Feedback