Skip to content

Styled Form Components

Description

The Form components provide styled wrappers for HTML forms, ensuring consistent spacing and layout in authentication pages and user input sections.

Props

Prop Type Default Description
width string | number 100% Defines the form width to ensure proper responsiveness.
marginTop string | number theme.spacing(1) Sets the top margin for spacing and alignment.

Example Usage

Basic Login Form

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { Form_Login } from '@nomana-it/liberty-core';

export const LoginFormExample = () => {
  return (
    <Form_Login>
        <Div_AppsLogin>
            <Input_White
                variant="standard"
                required
                fullWidth
                id="userid"
                label={t("login.userid")}
                name="user"
                autoComplete="user"
                autoFocus
            />
        </Div_AppsLogin>
        <Div_AppsLogin>
            <Input_White
                variant="standard"
                required
                fullWidth
                name="password"
                label={t("login.password")}
                type="password"
                id="password"
                autoComplete="off"
            />
        </Div_AppsLogin>
        <Button_Login type="submit" fullWidth variant="contained">
            {t("login.loginButton")}
        </Button_Login>
    </Form_Login>
  );
};

Predefined Styled Form Components

Liberty Core provides predefined styled form components to simplify UI development.

General Styled Forms

  • Form_Login

```

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core