On This Page

Forms

Forms are wrapped in the FormContainer component, which styles form elements within.

Input and labels

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.form
import live-web-view.content
Styles
static any[] use = [FormContainer]
Content
FormContainer{
    FormGroup{
        Label{ T`Email` }
        TextInput{ type='email' placeholder='Email Address' name='email' }
    }
    FormGroup{
        Label{ T`Password` }
        TextInput{ type='password' placeholder='Password' name='password' }
    }
    FormGroup{
        SubmitButton{ T`Submit` }
    }
}

Messages

Error: Email address is invalid.
Info: Password should be at least 10 characters.
Expand/Collapse source code
Copied
Copy source sections
Copy source as is
SSR/CSR
Can be used both on the server and on the client side.
Imports
import live-web.dom
import live-web-view.form
import live-web-view.content
Styles
static any[] use = [FormContainer]
Content
FormContainer{
    FormGroup{
        TextInput{ type='email' placeholder='Email Address' name='email' }
    }
    FormMessage{ visible: true type: 'error'
        T`Error: Email address is invalid.`
    }
    FormGroup{
        TextInput{ type='password' placeholder='Password' name='password' }
    }
    FormMessage{ visible: true type: 'info'
        T`Info: Password should be at least 10 characters.`
    }
    FormGroup{
        SubmitButton{ T`Submit` }
    }
}