Utilities

1 Line

Donec posuere vulputate arcu. Fusce vulputate eleifend sapien. Phasellus magna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.

2 Line

3 Line

4 Line

As Link

Persistent

Donec posuere vulputate arcu.

Copy to clipboard

onChange

onDoubleClick

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Cras non dolor.

Gradient

Text

Minimals UI

Border

Content

Background

Paper

Countdown

Date

- -

days

- -

hours

- -

minutes

- -

seconds

Seconds

Color pickers

Single

#FF9800

Multiple

[ "#4CAF50", "#00BCD4" ]

Preview

Number input

Basic

With helper text

Bedrooms

Helper text

Disabled

Bedrooms

Phone input

Auto

Phone number

National: -International: -Raw: -

Default value

Phone number

National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432

Default country

Phone number

National: -International: -Raw: -

Fixed country

Phone number

National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432

Fixed country + international

Phone number

National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432

Fixed country + international + hideSelect

Phone number

National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432

Styled

Styling methods with Sx function.

Styling methods with styled() function.

Styling methods with styled() function with state.

Open

Active

Focused

Disabled

Styling methods with keyframes().

With styled()

With sx()

Utilities

Text max line

1 Line

2 Line

3 Line

4 Line

As Link

Persistent

Donec posuere vulputate arcu.

Copy to clipboard

onChange

onDoubleClick

Gradient

Text

Minimals UI

Border

Content

Background

Paper

Countdown

Date

- -

days

- -

hours

- -

minutes

- -

seconds

Seconds

Color pickers

Single

#FF9800

Multiple

[ "#4CAF50", "#00BCD4" ]

Preview

Number input

Basic

With helper text

Bedrooms

Helper text

Disabled

Bedrooms

Phone input

Auto

Phone number

National: -International: -Raw: -

Default value

Phone number

National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432

Default country

Phone number

National: -International: -Raw: -

Fixed country

Phone number

National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432

Fixed country + international

Phone number

National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432

Fixed country + international + hideSelect

Phone number

National: (02) 9876 5432International: +61 2 9876 5432Raw: +61298765432

Styled

Styling methods with Sx function.

Styling methods with styled() function.

Styling methods with styled() function with state.

Open

Active

Focused

Disabled

Styling methods with keyframes().

With styled()

With sx()