Inputs & Forms

Inputs collect data from users: text fields, dropdowns, toggles, and checkboxes. Good inputs say what they expect, communicate errors gently, and let users correct mistakes. Every input needs a visible label (never rely on placeholder alone), a helpful error state for invalid data, and a disabled state when the action is unavailable. The CTD Learns App uses MUI's outlined variant for all inputs with the 8px border radius and the orange primary color for focus rings.

Interactive Preview

TextField — All states

Props

variant

label

placeholder

error

disabled

Helper text

Switch — Toggle control

Props

checked

disabled

label

Text Input States

Default
Focused
Error

This field is required

Disabled
Property
Value

Border radius

8pxradiusMd

Font size

16pxbase

Label

14px
·500

Focus border

2pxprimary
·#E8541A

Error border

1pxdanger
·#EF4444

Disabled

bg#F7F7F8gray50
·border#C8C8CBgray300

Textarea

Default
Focused

Select

Default
Filled

Toggle / Switch

Property
Value

Track size

36 × 20px

Thumb size

16px

Active color

#E8541Aprimary

Inactive color

#C8C8CBgray300

Border radius

9999pxradiusFull

Code

TextField
<TextField
  label="Email address"
  variant="outlined"
  fullWidth
  error={!!errors.email}
  helperText={errors.email?.message}
/>
Textarea
<TextField
  label="Description"
  variant="outlined"
  fullWidth
  multiline
  minRows={3}
/>
Select
<FormControl fullWidth>
  <InputLabel>Status</InputLabel>
  <Select label="Status" value={status}>
    <MenuItem value="active">Active</MenuItem>
    <MenuItem value="draft">Draft</MenuItem>
  </Select>
</FormControl>
Switch
<Switch
  checked={darkMode}
  onChange={(e) => setDarkMode(e.target.checked)}
/>
CardsMenus