Text

A text input is the simpilest form component as it maps directly to a <input/> HTML element.

Example

FormInput("name")

Common Methods

For a list of common field component methods, see here.

Type

You can set the type for your <input/> field using as so:

FormInput("name").
    Text(). // Default - Not required.
    Email().
    URL().
    Password().
    Number().
    Telephone()

You're also able to set the type via a callback to any string of your choosing.

FormInput("name").
    TypeFn(
        func(ctx FieldContext) string {
            return "date"
        }
    )

Type number has implicit rule

Numeric Steps

When a form input is placed into the numeric type. You are able to customize the numeric step:

// static
FormInput("name").
    Number().
    NumericStep(10)

// callback
FormInput("name").
    Number().
    NumericStep(
        func (ctx FieldContext) int {
            return 100
        }
    )

Numeric Max Value

When a form input is placed into the numeric type, you are able to set a maximum value for the input:

// static
FormInput("name").
    Number().
    NumericMaxValue(100)
    
// callback
FormInput("name").
    Number().
    NumericMaxValueFn(func (ctx FieldContext) float64 {
        return 1000
    })

Has implicit rule

Numeric Min Value

When a form input is placed into the numeric type, you are able to set a minimum value for the input:

// static
FormInput("name").
    Number().
    NumericMinValue(100)
    
// callback
FormInput("name").
    Number().
    NumericMinValueFn(func (ctx FieldContext) float64 {
        return -1000
    })

Has implicit rule

Mode

You can set the mode of your text input as follows:

FormInput("name").
    ModeText(). // Default - Not required.
    ModeDecimal().
    ModeEmail().
    ModeNone().
    ModeNumeric().
    ModeSearch().
    ModeTelephone().
    ModeURL()

You're also able to set the mode via a callback to any string of your choosing.

FormInput("name").
    ModeFn(
        func(ctx FieldContext) string {
            return "your mode"
        }
    )

Icons

Text Inputs can have prefix or postfix icons included inside the text input container.

For a list of avaliable icons, please see our icons section.

Prefix Icons

FormInput("name").
    PrefixIcon(icons.Users)

Postfix Icons

FormInput("name").
    PostfixIcon(icons.Star)

Autocomplete

Autocompletion defaults to false. You can enable autocompletion of your input element using:

// static
FormInput("name").
    Autocomplete()

// callback
FormInput("name").
    AutocompleteFn(
        func(ctx FieldContext) bool {
            return true
        }
    )

Max Length

You can set the maximum length of your input using:

// static
FormInput("name").
    MaxLength(100)
    
// callback
FormInput("name").
    MaxLengthFn(
        func(ctx FieldContext) uint {
            return 1000
        }
    )

Has implicit rule

Min Length

You can set the minimum length of your input using:

// static
FormInput("name").
    MinLength(100)
    
// callback
FormInput("name").
    MinLengthFn(func(ctx FieldContext) uint {
        return 1
    })

Has implicit rule

Length

You can specify the exact length of your input using:

// static
FormInput("name").
    Length(24)
    
// callback
FormInput("name").
    LengthFn(func(ctx FieldContext) uint {
        return 24
    })

Has implicit rule

Placeholder

You can set the placeholder text for your input using:

// static
FormInput("name").
    Placeholder("Your placeholder text")

// callback
FormInput("name").
    PlaceholderFn(func (ctx FieldContext) string {
        return "Your placeholder text"
    })