Sizing

Large
Medium
Small

Plain text

If you want to have form controls styled as plain text, use inline style to override the default form control styling and preserve the correct margin and padding.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Text Overflow

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Sizing

Attributes

Disabled

The disabled attribute specifies whether the control is disabled for user input.

  • Disabled controls will not get passed to the form processor.
  • Disabled controls do not receive focus.
  • Disabled controls are skipped in tabbing navigation.

Read-only

The readOnly attribute specifies whether the control may be modified by the user.

  • Read-only controls will get passed to the form processor.
  • Read-only controls receive the focus but cannot be modified by the user.
  • Read-only controls are included in tabbing navigation.

Ref forwarding

ref.current.value = ""

Sizing

Attributes

Disabled

The disabled attribute specifies whether the control is disabled for user input.

  • Disabled controls will not get passed to the form processor.
  • Disabled controls do not receive focus.
  • Disabled controls are skipped in tabbing navigation.

Read-only

The select, optgroup, and option elements do not support the readOnly attribute.

Multiple

The multiple attribute specifies that multiple options can be selected at once.

Size

The size attribute specifies the number of visible options in the list.

Ref forwarding

ref.current.value = "one"

Attributes

Disabled

The disabled attribute specifies whether the control is disabled for user input.

  • Disabled controls will not get passed to the form processor.
  • Disabled controls do not receive focus.
  • Disabled controls are skipped in tabbing navigation.

Read-only

The readOnly attribute specifies whether the control may be modified by the user.

  • Read-only controls will get passed to the form processor.
  • Read-only controls receive the focus but cannot be modified by the user.
  • Read-only controls are included in tabbing navigation.

Ref forwarding

ref.current.value = ""

src/FormControl.jsx
Prop nameTypeDefaultDescription
lgbool
mdbool
smbool
tagcustomdiv
src/Input.jsx
Prop nameTypeDefaultDescription
tagcustominput
src/Select.jsx
Prop nameTypeDefaultDescription
tagcustomselect
src/Textarea.jsx
Prop nameTypeDefaultDescription
tagcustomtextarea