Components

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{ htmlFor: 'name' T`Name` }
        TextInput{ type='text' placeholder="Name" name="name" }
    }
    FormGroup{
        Label{ htmlFor: 'email' T`Email` }
        TextInput{ type='email' placeholder='Email Address' name='email' }
    }
    FormGroup{
        SubmitButton{ T`Submit` }
    }
}

Single line form groups

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{ layout: FormGroup.Layout.Row
        Label{ htmlFor: 'email' T`Email` }
        TextInput{ type='email' placeholder='Email Address' name='email' }
    }
    FormGroup{ layout: FormGroup.Layout.Row
        Label{ htmlFor: 'password' T`Password` }
        TextInput{ type='password' placeholder='Password' name='password' }
    }
}

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` }
    }
}

Form Controls

Text Input

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
Styles
static any[] use = [FormContainer]
Content
FormContainer{
    FormGroup{
        TextInput{ type='text' placeholder="Text Input" name="input" }
    }
}

Text Area

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
Styles
static any[] use = [FormContainer]
Content
FormContainer{
    FormGroup{
        TextArea{ placeholder="Text Area" name="input" }
    }
}

Checkbox

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
Styles
static any[] use = [FormContainer]
Content
FormContainer{
    FormGroup{ layout: FormGroup.Layout.Row
        Label{ htmlFor: 'checkbox' T`Check Box` }
        Checkbox{ name='checkbox' }
    }
}

Switch

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
Styles
static any[] use = [FormContainer]
Content
FormContainer{
    FormGroup{ layout: FormGroup.Layout.Row
        Label{ htmlFor: 'checkbox' T`Check Box` }
        Checkbox{ name='checkbox' }
    }
}

Select

Select ...
  • Chocolate
  • Vanilla
  • Strawberry
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
Styles
static any[] use = [FormContainer]
Content
FormContainer{
    SelectInput{ 
        placeholder='Select ...' 
        name='select'
        options = [
            { value: 'chocolate', label: 'Chocolate' },
            { value: 'vanilla', label: 'Vanilla' },
            { value: 'strawberry', label: 'Strawberry' }
        ]
    }
}

Extended Select

The SelectExtendedInput component is a wrapper around choices.js. The options property allows you to send configuration options to the choices internal object.

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
Styles
static any[] use = [FormContainer, DateTimeInput]
Content
FormContainer{
    FormGroup{
        SelectExtendedInput{
            options = ({ 
                choices: [
                    {
                        value: 'Option 1',
                        label: 'Option 1',
                        selected: true,
                        disabled: false,
                    },
                    {
                        value: 'Option 2',
                        label: 'Option 2 [Disabled]',
                        selected: false,
                        disabled: true
                    },
                    {
                        label: 'Group 1',
                        choices: [
                            {
                                value: 'Option 3',
                                label: 'Option 3',
                                selected: true,
                                disabled: false,
                            },
                            {
                                value: 'Option 4',
                                label: 'Option 4',
                                selected: false,
                                disabled: false
                            }
                        ]
                    }
                ]
            })
        }
    }
}

Password

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
Styles
static any[] use = [FormContainer, PasswordInput]
Content
FormContainer{
    FormContainer{
        FormGroup{
            PasswordInput{ 
                placeholder='Password ...' 
                name='password'
            }
        }
    }
}

Date & Time

The DateTimeInput component is a wrapper around flatpickr. The options property allows you to send configuration options to flatpickr.

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
Styles
static any[] use = [FormContainer, DateTimeInput]
Content
FormContainer{
    FormContainer{
        FormGroup{
            DateTimeInput{
                name = 'date'
                placeholder = 'Date ...'
            }
        }
        FormGroup{
            DateTimeInput{
                name = 'time'
                placeholder = 'Time ...'
                options = ({ noCalendar: true, enableTime: true })
            }
        }
        FormGroup{
            DateTimeInput{
                name = 'date-time'
                placeholder = 'Date and Time ...'
                options = ({ enableTime: true })
            }
        }
        FormGroup{
            DateTimeInput{
                name = 'date-range'
                placeholder = 'Date Range  ...'
                options = ({ mode: 'range' })
            }
        }
    }
}