Number Field

Number Field

사용자로부터 숫자 입력을 받기 위한 React 컴포넌트예요.

출처: 문서

본문

숫자 필드는 사용자로부터 숫자 입력을 받기 위한 증감 버튼(increment/decrement buttons)이 있는 입력 요소예요.

Material UI는 기본적으로 number field 컴포넌트를 포함하지 않지만, 이 페이지는 Base UI NumberField로 구성되고 Material Design(MD2) 사양에 맞게 스타일링된 컴포넌트를 제공해, Material UI와 함께 사용할 수 있게 해 줘요.

따라서 진행 전에 Base UI를 설치해야 해요. 이후 등장하는 예제들은 그대로 복사해 앱에 붙여 넣을 수 있어요. Base UI는 트리 셰이킹(tree-shakeable)이 가능하므로, 최종 번들에는 프로젝트에서 사용한 컴포넌트만 포함된다는 점을 알아 두세요.

설치 (Installation)

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

사용법 (Usage)

  1. 시각 디자인 요구에 맞는 아래 데모 중 하나를 선택하세요.
  2. 툴바에서 Expand code를 클릭하세요.
  3. ./components/로 시작하는 파일을 선택하세요.
  4. 코드를 복사해 프로젝트에 붙여 넣으세요.

아웃라인 필드 (Outlined field)

아웃라인 필드는 Material UI의 아웃라인 TextField와 동일한 구성 요소 — FormControl, OutlinedInput, InputLabel, FormHelperText — 를 사용하며, 증감 버튼용 end adornments를 포함해요. 자세한 내용은 Text Field—Components를 참조하세요.

import * as React from 'react';
import Box from '@mui/material/Box';
import NumberField from './components/NumberField';

export default function FieldDemo() {
  return (
    <Box sx={{ display: 'grid', gap: 4 }}>
      <NumberField label="Number Field" min={10} max={40} />
      <NumberField label="Number Field (Small)" size="small" />
      <NumberField
        label="Number Field with Error"
        min={10}
        max={40}
        defaultValue={100}
        size="small"
        error
      />
    </Box>
  );
}

스피너 필드 (Spinner field)

스피너 필드 컴포넌트에서는 증감 버튼이 아웃라인 입력 옆에 배치돼요. 이것은 터치 기기와 좁은 값 범위에 이상적이에요.

import * as React from 'react';
import Box from '@mui/material/Box';
import NumberSpinner from './components/NumberSpinner';

export default function SpinnerDemo() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        gap: 4,
        justifyContent: 'center',
      }}
    >
      <NumberSpinner label="Number Spinner" min={10} max={40} />
      <NumberSpinner label="Number Spinner (Small)" size="small" />
      <NumberSpinner
        label="Spinner with Error"
        min={10}
        max={40}
        defaultValue={100}
        size="small"
        error
      />
    </Box>
  );
}

Base UI API

모든 props에 대한 완전한 참조는 아래 문서를 확인하세요.

Button API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

import Button from '@mui/material/Button';
// or
import { Button } from '@mui/material';

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
color 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string 'primary' No
component elementType - No
disabled bool false No
disableElevation bool false No
disableFocusRipple bool false No
disableRipple bool false No
endIcon node - No
fullWidth bool false No
href string - No
loading bool null No
loadingIndicator node <CircularProgress color="inherit" size={16} /> No
loadingPosition 'center' | 'end' | 'start' 'center' No
size 'small' | 'medium' | 'large' | string 'medium' No
startIcon node - No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
variant 'contained' | 'outlined' | 'text' | string 'text' No

Note: The ref is forwarded to the root element (HTMLButtonElement).

Any other props supplied will be provided to the root element (ButtonBase).

Inheritance

위에서 명시적으로 문서화되지 않았지만, ButtonBase 컴포넌트의 props는 Button에서도 사용할 수 있어요.

Theme default props

MuiButton을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

Rule name

Global class Rule name Description
- colorError Styles applied to the root element if color="error".
- colorInfo Styles applied to the root element if color="info".
- colorInherit Styles applied to the root element if color="inherit".
- colorPrimary Styles applied to the root element if color="primary".
- colorSecondary Styles applied to the root element if color="secondary".
- colorSuccess Styles applied to the root element if color="success".
- colorWarning Styles applied to the root element if color="warning".
- contained Styles applied to the root element if variant="contained".
.Mui-disabled - State class applied to the root element if disabled={true}.
- disableElevation Styles applied to the root element if disableElevation={true}.
- endIcon Styles applied to the endIcon element if supplied.
.Mui-focusVisible - State class applied to the ButtonBase root element if the button is keyboard focused.
- fullWidth Styles applied to the root element if fullWidth={true}.
- icon Styles applied to the icon element if supplied
- loading Styles applied to the root element if loading={true}.
- loadingIconPlaceholder Styles applied to the loadingIconPlaceholder element.
- loadingIndicator Styles applied to the loadingIndicator element.
- loadingPositionCenter Styles applied to the root element if loadingPosition="center".
- loadingPositionEnd Styles applied to the root element if loadingPosition="end".
- loadingPositionStart Styles applied to the root element if loadingPosition="start".
- loadingWrapper Styles applied to the loadingWrapper element.
- outlined Styles applied to the root element if variant="outlined".
- root Styles applied to the root element.
- sizeLarge Styles applied to the root element if size="large".
- sizeMedium Styles applied to the root element if size="medium".
- sizeSmall Styles applied to the root element if size="small".
- startIcon Styles applied to the startIcon element if supplied.
- text Styles applied to the root element if variant="text".

Source code

이 페이지에서 정보를 찾지 못했다면, 컴포넌트 구현을 살펴보고 더 자세한 내용을 확인해 보세요.

FormControl API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

import FormControl from '@mui/material/FormControl';
// or
import { FormControl } from '@mui/material';

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
color 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string 'primary' No
component elementType - No
disabled bool false No
error bool false No
focused bool - No
fullWidth bool false No
hiddenLabel bool false No
margin 'dense' | 'none' | 'normal' 'none' No
required bool false No
size 'medium' | 'small' | string 'medium' No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
variant 'filled' | 'outlined' | 'standard' 'outlined' No

Note: The ref is forwarded to the root element (HTMLDivElement).

Any other props supplied will be provided to the root element (native element).

Theme default props

MuiFormControl을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

Rule name

Global class Rule name Description
- fullWidth Styles applied to the root element if fullWidth={true}.
- marginDense Styles applied to the root element if margin="dense".
- marginNormal Styles applied to the root element if margin="normal".
- root Styles applied to the root element.

Source code

이 페이지에서 정보를 찾지 못했다면, 컴포넌트 구현을 살펴보고 더 자세한 내용을 확인해 보세요.

FormHelperText API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

import FormHelperText from '@mui/material/FormHelperText';
// or
import { FormHelperText } from '@mui/material';

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
component elementType - No
disabled bool - No
error bool - No
filled bool - No
focused bool - No
margin 'dense' - No
required bool - No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
variant 'filled' | 'outlined' | 'standard' | string - No

Note: The ref is forwarded to the root element (HTMLParagraphElement).

Any other props supplied will be provided to the root element (native element).

Theme default props

MuiFormHelperText을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

Rule name

Global class Rule name Description
- contained Styles applied to the root element if variant="filled" or variant="outlined".
.Mui-disabled - State class applied to the root element if disabled={true}.
.Mui-error - State class applied to the root element if error={true}.
- filled State class applied to the root element if filled={true}.
.Mui-focused - State class applied to the root element if focused={true}.
.Mui-required - State class applied to the root element if required={true}.
- root Styles applied to the root element.
- sizeSmall Styles applied to the root element if size="small".

Source code

이 페이지에서 정보를 찾지 못했다면, 컴포넌트 구현을 살펴보고 더 자세한 내용을 확인해 보세요.

FormLabel API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

import FormLabel from '@mui/material/FormLabel';
// or
import { FormLabel } from '@mui/material';

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
color 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'warning' | string - No
component elementType - No
disabled bool - No
error bool - No
filled bool - No
focused bool - No
required bool - No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.

Note: The ref is forwarded to the root element (HTMLLabelElement).

Any other props supplied will be provided to the root element (native element).

Theme default props

MuiFormLabel을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

Rule name

Global class Rule name Description
- asterisk Styles applied to the asterisk element.
- colorSecondary Styles applied to the root element if the color is secondary.
.Mui-disabled - State class applied to the root element if disabled={true}.
.Mui-error - State class applied to the root element if error={true}.
- filled State class applied to the root element if filled={true}.
.Mui-focused - State class applied to the root element if focused={true}.
.Mui-required - State class applied to the root element if required={true}.
- root Styles applied to the root element.

Source code

이 페이지에서 정보를 찾지 못했다면, 컴포넌트 구현을 살펴보고 더 자세한 내용을 확인해 보세요.

IconButton API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

import IconButton from '@mui/material/IconButton';
// or
import { IconButton } from '@mui/material';

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
color 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string 'default' No
disabled bool false No
disableFocusRipple bool false No
disableRipple bool false No
edge 'end' | 'start' | false false No
loading bool null No
loadingIndicator node <CircularProgress color="inherit" size={16} /> No
size 'small' | 'medium' | 'large' | string 'medium' No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.

Note: The ref is forwarded to the root element (HTMLButtonElement).

Any other props supplied will be provided to the root element (ButtonBase).

Inheritance

위에서 명시적으로 문서화되지 않았지만, ButtonBase 컴포넌트의 props는 IconButton에서도 사용할 수 있어요.

Theme default props

MuiIconButton을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

Rule name

Global class Rule name Description
- colorError Styles applied to the root element if color="error".
- colorInfo Styles applied to the root element if color="info".
- colorInherit Styles applied to the root element if color="inherit".
- colorPrimary Styles applied to the root element if color="primary".
- colorSecondary Styles applied to the root element if color="secondary".
- colorSuccess Styles applied to the root element if color="success".
- colorWarning Styles applied to the root element if color="warning".
.Mui-disabled - State class applied to the root element if disabled={true}.
- edgeEnd Styles applied to the root element if edge="end".
- edgeStart Styles applied to the root element if edge="start".
- loading Styles applied to the root element if loading={true}.
- loadingIndicator Styles applied to the loadingIndicator element.
- loadingWrapper Styles applied to the loadingWrapper element.
- root Styles applied to the root element.
- sizeLarge Styles applied to the root element if size="large".
- sizeMedium Styles applied to the root element if size="medium".
- sizeSmall Styles applied to the root element if size="small".

Source code

이 페이지에서 정보를 찾지 못했다면, 컴포넌트 구현을 살펴보고 더 자세한 내용을 확인해 보세요.

InputLabel API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

import InputLabel from '@mui/material/InputLabel';
// or
import { InputLabel } from '@mui/material';

Props

Name Type Default Required Description
children node - No
classes object - No Override or extend the styles applied to the component.
color 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'warning' | string - No
disableAnimation bool false No
disabled bool - No
error bool - No
focused bool - No
margin 'dense' - No
required bool - No
shrink bool - No
size 'medium' | 'small' | string 'medium' No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
variant 'filled' | 'outlined' | 'standard' - No

Note: The ref is forwarded to the root element (HTMLLabelElement).

Any other props supplied will be provided to the root element (FormLabel).

Inheritance

위에서 명시적으로 문서화되지 않았지만, FormLabel 컴포넌트의 props는 InputLabel에서도 사용할 수 있어요.

Theme default props

MuiInputLabel을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

Rule name

Global class Rule name Description
- animated Styles applied to the input element unless disableAnimation={true}.
- asterisk State class applied to the asterisk element.
.Mui-disabled - State class applied to the root element if disabled={true}.
.Mui-error - State class applied to the root element if error={true}.
- filled Styles applied to the root element if variant="filled".
.Mui-focused - State class applied to the root element if focused={true}.
- formControl Styles applied to the root element if the component is a descendant of FormControl.
- outlined Styles applied to the root element if variant="outlined".
.Mui-required - State class applied to the root element if required={true}.
- root Styles applied to the root element.
- shrink Styles applied to the input element if shrink={true}.
- sizeSmall Styles applied to the root element if size="small".
- standard Styles applied to the root element if variant="standard".

Source code

이 페이지에서 정보를 찾지 못했다면, 컴포넌트 구현을 살펴보고 더 자세한 내용을 확인해 보세요.

OutlinedInput API

데모 (Demos)

이 React 컴포넌트 사용에 대한 예제와 세부 사항은 컴포넌트 데모 페이지를 확인하세요:

Import

import OutlinedInput from '@mui/material/OutlinedInput';
// or
import { OutlinedInput } from '@mui/material';

Props

Name Type Default Required Description
autoComplete string - No
autoFocus bool - No
classes object - No Override or extend the styles applied to the component.
color 'primary' | 'secondary' | string - No
defaultValue any - No
disabled bool - No
endAdornment node - No
error bool - No
fullWidth bool false No
id string - No
inputComponent elementType 'input' No
inputProps object {} No
inputRef ref - No
label node - No
margin 'dense' | 'none' - No
maxRows number | string - No
minRows number | string - No
multiline bool false No
name string - No
notched bool - No
onChange function(event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void - No
placeholder string - No
readOnly bool - No
required bool - No
rows number | string - No
slotProps { input?: object, notchedOutline?: func | object, root?: object } {} No
slots { input?: elementType, notchedOutline?: elementType, root?: elementType } {} No
startAdornment node - No
sx Array<func | object | bool> | func | object - No The system prop that allows defining system overrides as well as additional CSS styles.
type string 'text' No
value any - No

Note: The ref is forwarded to the root element (HTMLDivElement).

Any other props supplied will be provided to the root element (InputBase).

Inheritance

위에서 명시적으로 문서화되지 않았지만, InputBase 컴포넌트의 props는 OutlinedInput에서도 사용할 수 있어요.

Theme default props

MuiOutlinedInput을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

Rule name

Global class Rule name Description
- adornedEnd Styles applied to the root element if endAdornment is provided.
- adornedStart Styles applied to the root element if startAdornment is provided.
- colorSecondary Styles applied to the root element if the color is secondary.
.Mui-disabled - Styles applied to the root element if disabled={true}.
.Mui-error - State class applied to the root element if error={true}.
.Mui-focused - Styles applied to the root element if the component is focused.
- input Styles applied to the input element.
- inputTypeSearch Styles applied to the input element if type="search".
- multiline Styles applied to the root element if multiline={true}.
- notchedOutline Styles applied to the NotchedOutline element.
- root Styles applied to the root element.
- sizeSmall Styles applied to the input element if size="small".

Source code

이 페이지에서 정보를 찾지 못했다면, 컴포넌트 구현을 살펴보고 더 자세한 내용을 확인해 보세요.

더 알아보기 (Learn more)