[Joy][docs] Add documentation for Input component (#35482)

docs/data/joy/components/input/BasicInput.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+
+export default function BasicInput() {
+  return <Input placeholder="Type in here…" />;
+}

docs/data/joy/components/input/BasicInput.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+
+export default function BasicInput() {
+  return <Input placeholder="Type in here…" />;
+}

docs/data/joy/components/input/BasicInput.tsx.preview

@@ -0,0 +1 @@
+<Input placeholder="Type in here…" />

docs/data/joy/components/input/InputColors.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputColors() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Input placeholder="Type in here…" variant="outlined" color="primary" />
+      <Input placeholder="Type in here…" variant="outlined" color="neutral" />
+      <Input placeholder="Type in here…" variant="outlined" color="danger" />
+      <Input placeholder="Type in here…" variant="outlined" color="warning" />
+    </Box>
+  );
+}

docs/data/joy/components/input/InputColors.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputColors() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Input placeholder="Type in here…" variant="outlined" color="primary" />
+      <Input placeholder="Type in here…" variant="outlined" color="neutral" />
+      <Input placeholder="Type in here…" variant="outlined" color="danger" />
+      <Input placeholder="Type in here…" variant="outlined" color="warning" />
+    </Box>
+  );
+}

docs/data/joy/components/input/InputColors.tsx.preview

@@ -0,0 +1,4 @@
+<Input placeholder="Type in here…" variant="outlined" color="primary" />
+<Input placeholder="Type in here…" variant="outlined" color="neutral" />
+<Input placeholder="Type in here…" variant="outlined" color="danger" />
+<Input placeholder="Type in here…" variant="outlined" color="warning" />

docs/data/joy/components/input/InputDecorators.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Divider from '@mui/joy/Divider';
+import Input from '@mui/joy/Input';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+export default function InputDecorators() {
+  const [currency, setCurrency] = React.useState('dollar');
+  return (
+    <Input
+      placeholder="Amount"
+      startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
+      endDecorator={
+        <React.Fragment>
+          <Divider orientation="vertical" />
+          <Select
+            variant="plain"
+            value={currency}
+            onChange={(_, value) => setCurrency(value)}
+            sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
+          >
+            <Option value="dollar">US dollar</Option>
+            <Option value="baht">Thai baht</Option>
+            <Option value="yen">Japanese yen</Option>
+          </Select>
+        </React.Fragment>
+      }
+      sx={{ width: 300 }}
+    />
+  );
+}

docs/data/joy/components/input/InputDecorators.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Divider from '@mui/joy/Divider';
+import Input from '@mui/joy/Input';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+export default function InputDecorators() {
+  const [currency, setCurrency] = React.useState('dollar');
+  return (
+    <Input
+      placeholder="Amount"
+      startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
+      endDecorator={
+        <React.Fragment>
+          <Divider orientation="vertical" />
+          <Select
+            variant="plain"
+            value={currency}
+            onChange={(_, value) => setCurrency(value!)}
+            sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
+          >
+            <Option value="dollar">US dollar</Option>
+            <Option value="baht">Thai baht</Option>
+            <Option value="yen">Japanese yen</Option>
+          </Select>
+        </React.Fragment>
+      }
+      sx={{ width: 300 }}
+    />
+  );
+}

docs/data/joy/components/input/InputField.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
+
+export default function InputField() {
+  return (
+    <FormControl>
+      <FormLabel>Label</FormLabel>
+      <Input placeholder="Placeholder" />
+      <FormHelperText>This is a helper text.</FormHelperText>
+    </FormControl>
+  );
+}

docs/data/joy/components/input/InputField.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Input from '@mui/joy/Input';
+
+export default function InputField() {
+  return (
+    <FormControl>
+      <FormLabel>Label</FormLabel>
+      <Input placeholder="Placeholder" />
+      <FormHelperText>This is a helper text.</FormHelperText>
+    </FormControl>
+  );
+}

docs/data/joy/components/input/InputField.tsx.preview

@@ -0,0 +1,5 @@
+<FormControl>
+  <FormLabel>Label</FormLabel>
+  <Input placeholder="Placeholder" />
+  <FormHelperText>This is a helper text.</FormHelperText>
+</FormControl>

docs/data/joy/components/input/InputFormProps.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+
+export default function InputFormProps() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <Input
+          placeholder="Try to submit with no text!"
+          required
+          sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+        />
+        <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Box>
+  );
+}

docs/data/joy/components/input/InputFormProps.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Input from '@mui/joy/Input';
+
+export default function InputFormProps() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <Input
+          placeholder="Try to submit with no text!"
+          required
+          sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+        />
+        <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Box>
+  );
+}

docs/data/joy/components/input/InputFormProps.tsx.preview

@@ -0,0 +1,13 @@
+<form
+  onSubmit={(event) => {
+    event.preventDefault();
+  }}
+>
+  <Input
+    placeholder="Try to submit with no text!"
+    required
+    sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+  />
+  <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+  <Button type="submit">Submit</Button>
+</form>

docs/data/joy/components/input/InputSizes.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
+
+export default function InputSizes() {
+  return (
+    <Stack spacing={2}>
+      <Input size="sm" placeholder="Small" />
+      <Input size="md" placeholder="Medium" />
+      <Input size="lg" placeholder="Large" />
+    </Stack>
+  );
+}

docs/data/joy/components/input/InputSizes.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+import Stack from '@mui/joy/Stack';
+
+export default function InputSizes() {
+  return (
+    <Stack spacing={2}>
+      <Input size="sm" placeholder="Small" />
+      <Input size="md" placeholder="Medium" />
+      <Input size="lg" placeholder="Large" />
+    </Stack>
+  );
+}

docs/data/joy/components/input/InputSizes.tsx.preview

@@ -0,0 +1,3 @@
+<Input size="sm" placeholder="Small" />
+<Input size="md" placeholder="Medium" />
+<Input size="lg" placeholder="Large" />

docs/data/joy/components/input/InputSlotProps.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+
+export default function InputSlotProps() {
+  return (
+    <Input
+      type="number"
+      defaultValue={2.5}
+      slotProps={{
+        input: {
+          min: 1,
+          max: 5,
+          step: 0.1,
+        },
+      }}
+    />
+  );
+}

docs/data/joy/components/input/InputSlotProps.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Input from '@mui/joy/Input';
+
+export default function InputSlotProps() {
+  return (
+    <Input
+      type="number"
+      defaultValue={2.5}
+      slotProps={{
+        input: {
+          min: 1,
+          max: 5,
+          step: 0.1,
+        },
+      }}
+    />
+  );
+}

docs/data/joy/components/input/InputSlotProps.tsx.preview

@@ -0,0 +1,11 @@
+<Input
+  type="number"
+  defaultValue={2.5}
+  slotProps={{
+    input: {
+      min: 1,
+      max: 5,
+      step: 0.1,
+    },
+  }}
+/>