Form Elements

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Component NameDevelopment Status
TextInputDONE
NumberInputDONE
SelectInputDONE
TextAreaDONE
FormGroupDONE
FormLabelDONE
FormHintDONE
FormValidationMessageDONE

Examples

You can find all examples for components developed in this module here.

Basic TextInput Example

Very basic TextInput component examples.

Inline TextInput

You can use TextInput component as inline.

Sizes

You can use different size variants for TextInput.

You can also use this component with transparent option.

Properties

This component composes styled-system

Property NameTypeDescription
size - 'md'enumSize of input. Same as button. Default is 'md'
inline - falseboolPass this prop if the input is display: inline-block and width: auto.
transparent - falseboolPass this prop if input is transparent. (Shows border when hovered.)
minimal - falseboolPass this prop if input has a border-bottom only and no hover&focus effects.

Basic NumberInput Example

Very basic NumberInput component examples.

You can also use decimal values too.

Advanced NumberInput Example

You can find some advanced NumberInput component examples here.

Format with pattern : Format credit card as text.

Mask can also be a array of string. Each item corresponds to the same index #.

Properties

This component composes react-number-formatstyled-system

Property NameTypeDescription
size - 'md'enumSize of input. Same as button. Default is 'md'
inline - falseboolPass this prop if the input is display: inline-block and width: auto.
transparent - falseboolPass this prop if input is transparent. (Shows border when hovered.)

Basic SelectInput Example

Very basic SelectInput component examples. No search and other capabilities. Use Combobox component for advanced functionality.

Select Sizes

You can use different size variants for SelectInput.

Properties

This component composes styled-system

Property NameTypeDescription
size - 'md'enumSize of input. Same as button. Default is 'md'
inline - falseboolPass this prop if the input is display: inline-block and width: auto.

TextArea Example

You can use TextArea component for multi-line inputs.

You can also use TextArea component with autoResize option too.

You can also use TextArea with transparent option. (For invoices and stuff.)

Properties

This component composes styled-system

Property NameTypeDescription
rows - 2number
autoResize - falsebool
transparentbool
size - 'md'enum

Form Elements Sink

You can find some examples using all of the form elements.

You can use FormHint to give message about input to inputs in general.
Bu alan boş geçilemez.
You can use FormHint to give message about input to inputs in general.

You can also use forms as inline.